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文件并在div #displayPage中显示页面预览，并将文件的HTML标记放入textarea #displayHtml？我不知道怎么做，所以请帮忙。

我的小提琴就在这里：https://jsfiddle.net/zm6ga2ev/1/

Answer 1

您可以使用HTML5中的文件API执行此操作。

这是一个快速的＆amp;脏的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/

找到一个体面的解释和更全面的例子，说明一切如何融合在一起

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");

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，则会获得空内容。

注意的

加载页面必须允许跨域请求（通常意味着相同的域请求）。查看here的跨源请求。

如何加载外部HTML文件

3 个答案: