如何加载外部HTML文件

Question

我有以下HTML代码：

Select a file : <input type="file"><br><br>
Html Codes : <textarea id="displayHtml"></textarea><br><br>
<div id="displayPage">Display the Html Page here</div>

现在我该如何浏览本地硬盘上的外部HTML文件并将页面预览显示在

#displayPage

中, 并将文件的HTML标记获取到#displayHtml中？我不知道如何做，请帮助我。

这里是我的示例： https://jsfiddle.net/zm6ga2ev/1/

- user5384372

---

你尝试过追加已加载的HTML吗？ - Vivek Pratap Singh

要从文件输入中访问文件，您需要首先上传它或被允许使用file api。 - mplungjan

@mplungjan 有任何例子吗？ - user5384372

不要这样使用Stack Overflow。请先进行研究并展示努力。如果您不想上传，请从我给出的链接开始。如果您想上传，请在上传后搜索访问文件。 - mplungjan

Answer 1

您可以使用HTML5中的File API来完成这个操作。

以下是一个简单而快速的JS示例：

function handleFileSelect(evt) {
  var file = evt.target.files[0]; // File inputs are an array - get the first element
  var reader = new FileReader();

  reader.onload = function(e) {
    // Render the supplied file
    document.getElementById('displayHtml').value = e.target.result
    document.getElementById('displayPage').innerHTML = e.target.result;
  };

  // Read in the HTML file.
  reader.readAsText(file);
};

document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);

JSFiddle: https://jsfiddle.net/8te1hyv9/

在这里可以找到更详细的解释和更全面的示例，介绍了如何将所有内容组合在一起：http://www.html5rocks.com/en/tutorials/file/dndfiles/

- Jimmy Carr

---

在我看来，这应该是被采纳的答案：该答案包含了示例和外部资源链接。原始问题没有指定任何外部库，而该答案也没有使用任何外部库。此外，该答案还提供了一个完整的工作示例，可以通过jsfiddle链接查看。 - Jonathan

Answer 2

让用户将HTML文件上传到您的服务器。

以下是通过Ajax上传文件的好方法：http://code.tutsplus.com/tutorials/uploading-files-with-ajax--net-21077 现在，您可以使用此代码将HTML文件加载到div标签中。

document.getElementById("displayPage").innerHTML='<object type="text/html" data="page.html" ></object>';

或者简单地使用 jQuery 的 .load() 函数。

$("#displayPage").load("page.html");

- dunstorm

Answer 3

你只需将其他页面内容.load到你的div中。

//Load full document
$('#displayPage').load('http://same-domain.com/next-page.html');

// You can use any CSS selector to load only part of page
$('#displayPage').load('http://same-domain.com/next-page.html #some-inner-id > *');

如果在DOM中找不到#displayPage元素，则不会执行任何请求！如果在请求页面的DOM中找不到#some-inner-id，则会得到空内容。

---

注意

加载的页面必须允许跨域请求（通常意味着同一域名的请求）。点击这里查看有关跨域请求的信息。

- Justinas