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的{{1}}属性（覆盖srcdoc属性）：

src

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

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

2 个答案: