我很确定这是一个常见问题，但我对 JS 很陌生，并且在这方面遇到了一些麻烦。
我想在不使用 iframe 的情况下将 x.html 加载到 id 为“y”的 div 中。我已经尝试了一些东西，四处搜索，但我找不到解决我的问题的体面方法。
如果可能的话，我更喜欢 JavaScript 中的东西。
提前谢谢大家！
将 HTML 文件内容加载到 Div [不使用 iframe]
IT技术
javascript
html
2021-02-04 02:53:07
6个回答
哇，从所有框架宣传的答案中，你会认为这是 JavaScript 变得非常困难的事情。真的不是。
var xhr= new XMLHttpRequest();
xhr.open('GET', 'x.html', true);
xhr.onreadystatechange= function() {
if (this.readyState!==4) return;
if (this.status!==200) return; // or whatever error handling you want
document.getElementById('y').innerHTML= this.responseText;
};
xhr.send();
如果您需要 IE<8 兼容性，请先执行此操作以使这些浏览器跟上速度：
if (!window.XMLHttpRequest && 'ActiveXObject' in window) {
window.XMLHttpRequest= function() {
return new ActiveXObject('MSXML2.XMLHttp');
};
}
请注意，使用脚本将内容加载到页面中将使该内容对没有 JavaScript 可用的客户端（例如搜索引擎）不可见。小心使用，如果您只想将数据放在公共共享文件中，请考虑服务器端包含。
jQuery.load()方法：
$("#y").load("x.html");
2019
使用 fetch
<script>
fetch('page.html')
.then(data => data.text())
.then(html => document.getElementById('elementID').innerHTML = html);
</script>
<div id='elementID'> </div>
fetch 需要接收一个 http 或 https 链接，这意味着它不会在本地工作。
注意：正如Altimus Prime所说，这是现代浏览器的一项功能
我建议进入那里的 JS 库之一。它们确保兼容性，因此您可以非常快速地启动和运行。jQuery 和 DOJO 都非常棒。例如，要执行您在 jQuery 中尝试执行的操作，它会是这样的：
<script type="text/javascript" language="JavaScript">
$.ajax({
url: "x.html",
context: document.body,
success: function(response) {
$("#yourDiv").html(response);
}
});
</script>
document.getElementById("id").innerHTML='<object type="text/html" data="x.html"></object>';