使用innerHTML属性来显示另一个html文件的内容？

Question

我试图将我的一个元素的innerHTML设置为另一个只显示纯文本的html文件的内容.这可能吗？我正在考虑它的方式如下,但显然它只是直接将文本设置为该引用而不是显示文件的内容.

document.getElementById("myElement").innerHTML = "directory/file.html"

Answer 1

您可以使用iframe标签:

<iframe id="myHtml" src="directory/file.html"></iframe>

您iframe只需更改其src属性即可轻松更改内容(它将自动更新):

document.getElementById('myHtml').src = 'other_file.html';

如果您还想使用innerHTML从字符串显示html,则可以使用iframe's srcdoc属性(覆盖src属性):

document.getElementById('myHtml').srcdoc = '<div><p>Some HTML</p></div>';

Answer 2

您可以ajax调用以获取文件内容，并在成功后将它们放入html中。

var xhr = typeof XMLHttpRequest != 'undefined' ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.open('get', 'directory/file.html', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) { 
        document.getElementById("myElement").innerHTML = xhr.responseText;
    } 
}
xhr.send();

或使用jQuery，为您制作了load（）方法：

$( "#myElement" ).load( "directory/file.html" );