如何加載外部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文件並在div #displayPage顯示頁面預覽，並將文件的HTML標簽放入textarea #displayHtml ？ 我不知道怎么做，所以請幫忙。

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

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/

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 ，則會獲得空內容。

---

注意

加載的頁面必須允許跨域請求（通常它意味着相同的域請求）。 在這里查看跨源請求。