Javascript 将HTML文件内容加载到Div[不使用iframe]

我很确定这是一个常见的问题，但我对JS还很陌生，在这方面遇到了一些问题

我想在不使用iframe的情况下将x.html加载到id为“y”的div中。我尝试了一些方法，四处搜索，但我找不到一个解决问题的好办法

如果可能的话，我更喜欢JavaScript

---

提前谢谢大家

我建议进入一个JS库。它们确保了兼容性，因此您可以快速启动并运行。jQuery和DOJO都非常棒。例如，要执行您在jQuery中尝试执行的操作，可以执行以下操作：

<script type="text/javascript" language="JavaScript">
$.ajax({
    url: "x.html", 
    context: document.body,
    success: function(response) {
        $("#yourDiv").html(response);
    }
});
</script>

$.ajax({
网址：“x.html”，
上下文：document.body，
成功：功能（响应）{
$（“#yourDiv”）.html（回复）；
}
});

jQuery：

$("#y").load("x.html");

---

这将解释如何编写自己的clientsideinlcude，但jQuery是一个非常简单的选项。。。另外，通过使用jQuery，您将获得更多好处，从所有的框架推广答案中，您可能会认为这是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

document.getElementById（“id”）.innerHTML=''；

2019
使用fetch

fetch（'page.html'）
.then（data=>data.text（））
.then（html=>document.getElementById（'elementID'）。innerHTML=html）；

fetch需要接收http或https链接，这意味着它在本地无法工作

注意：如前所述，它是现代浏览器的一项功能

2021

对thiagola92答案的两个改进

异步等待

超过innerText（更快）

异步函数loadHtml（）{
const response=wait fetch（“page.html”）
const text=wait response.text（）
document.getElementById（'elementID'）。insertAdjacentText（'beforeend'，text）
}
loadHtml（）

---

如果这是唯一的办法，我想也没关系。虽然我从来没有使用过jQuery，但这不是唯一的方法，但它确实可以抽象出像这样的问题所带来的大部分复杂性。另外，请记住，出于安全考虑，您不能使用JavaScription从其他站点（不同的域名）加载HTML。这是一个很好的答案，因为问题不是关于JQuery的。在某些情况下，您无法使用JQuery或某些框架来执行此操作。奇怪的是，我得到了一个

NS\u错误\u DOM\u错误\u URI:Access to restricted URI denied

error@Costa：听起来您正试图执行跨站点XMLHttpRequest。出于安全原因，这是不允许的，除非目标站点选择加入。今天的浏览器不允许您将XHR放到文件系统上。您需要设置一个测试web服务器。@bobince，回答得很好，您知道为什么导入文件的脚本不呈现吗？实际上，通过使用您的答案，我可以只导入html，而不导入从json文件中呈现的生成内容。谢谢你的帮助。jQuery很棒，可以做所有的事情。为什么这个答案没有标记为已回答，对我来说它就像一个符咒！令人惊讶的是，只需要jquery就可以创建一个动态主页。@EdgarsŠturms它可以工作，而且简洁，但这不是正确的答案，因为这个问题没有要求jquery解决方案。OP从未说过它不能是jquery（许多人通过“javascript”询问/搜索jquery），并澄清了以下内容：“如果这是唯一的办法，我想也没关系。但是我从来没有使用过jQuery…”所以不，这绝对是最好的答案。我用它来加载x.html，然后加载x.js。这个js可以工作，因为我设置了一个警报（）在第一行，但是x.js中定义的函数不起作用，你知道为什么吗？+1对于现代浏览器来说是一个很好的答案，但是请注意：经过几个小时的测试，我无法在Cordova 9.0.0中实现这一点，不得不求助于老式的

XMLHttpRequest

，它工作得很好。我认为Cordova不支持

fetch

还没有。回答很好！这对我在VSCode中开发和在Windows Powershell中测试live server都很有用。使用Javascript访问本地文件需要调整安全策略设置，如：。虽然这可能是一个注释，但答案是正确的，jQuery可以处理很多事情。包括异步获取文件内容。

if (!window.XMLHttpRequest && 'ActiveXObject' in window) {
    window.XMLHttpRequest= function() {
        return new ActiveXObject('MSXML2.XMLHttp');
    };
}

    document.getElementById("id").innerHTML='<object type="text/html" data="x.html"></object>';

<script>
async function loadHtml() {
     const response = await fetch("page.html")
     const text = await response.text()
     document.getElementById('elementID').insertAdjacentText('beforeend', text)
}

loadHtml()
</script>
<!-- ... -->
<div id='elementID'> </div>