Javascript 将 HTML 文件内容加载到 Div [不使用 iframe]
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3535055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load HTML File Contents to Div [without the use of iframes]
提问by MapWeb
I'm quite sure this a common question, but I'm pretty new to JS and am having some trouble with this.
我很确定这是一个常见问题，但我对 JS 很陌生，并且在这方面遇到了一些麻烦。
I would like to load x.html into a div with id "y" without using iframes. I've tried a few things, searched around, but I can't find a decent solution to my issue.
我想在不使用 iframe 的情况下将 x.html 加载到 id 为“y”的 div 中。我已经尝试了一些东西，四处搜索，但我找不到解决我问题的体面方法。
I would prefer something in JavaScript if possible.
如果可能的话，我更喜欢 JavaScript 中的东西。
Thanks in advance, everyone!
提前谢谢大家！
回答by bobince
Wow, from all the framework-promotional answers you'd think this was something JavaScript made incredibly difficult. It isn't really.
哇，从所有框架宣传的答案中，你会认为这是 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();
If you need IE<8 compatibility, do this first to bring those browsers up to speed:
如果您需要 IE<8 兼容性，请先执行此操作以使这些浏览器跟上速度：
if (!window.XMLHttpRequest && 'ActiveXObject' in window) {
window.XMLHttpRequest= function() {
return new ActiveXObject('MSXML2.XMLHttp');
};
}
Note that loading content into the page with scripts will make that content invisible to clients without JavaScript available, such as search engines. Use with care, and consider server-side includes if all you want is to put data in a common shared file.
请注意，使用脚本将内容加载到页面中将使该内容对于没有 JavaScript 可用的客户端（例如搜索引擎）不可见。小心使用，如果您只想将数据放在公共共享文件中，请考虑服务器端包含。
回答by Dejan Marjanovic
jQuery:
jQuery：
$("#y").load("x.html");
回答by thiagola92
2019
Using fetch
2019
使用 fetch
<script>
fetch('page.html')
.then(data => data.text())
.then(html => document.getElementById('elementID').innerHTML = html);
</script>
<div id='elementID'> </div>
fetch needs to receive a http or https link, this means that it won't work locally.
fetch 需要接收一个 http 或 https 链接，这意味着它不会在本地工作。
Note: As Altimus Primesaid, it is a feature for modern browsers
注意：正如Altimus Prime所说，这是现代浏览器的一项功能
回答by KeatsKelleher
I'd suggest getting into one of the JS libraries out there. They ensure compatibility so you can get up and running really fast. jQuery and DOJO are both really great. To do what you're trying to do in jQuery, for example, it would go something like this:
我建议进入那里的 JS 库之一。它们确保兼容性，因此您可以非常快速地启动和运行。jQuery 和 DOJO 都很棒。例如，要执行您在 jQuery 中尝试执行的操作，它会是这样的：
<script type="text/javascript" language="JavaScript">
$.ajax({
url: "x.html",
context: document.body,
success: function(response) {
$("#yourDiv").html(response);
}
});
</script>
回答by john p
document.getElementById("id").innerHTML='<object type="text/html" data="x.html"></object>';
回答by drusnov
http://www.boutell.com/newfaq/creating/include.html
http://www.boutell.com/newfaq/creating/include.html
this would explain how to write your own clientsideinlcude but jQuery is a lot, A LOT easier option ... plus you will gain a lot more by using jQuery anyways
这将解释如何编写自己的客户端inlcude，但jQuery 很多，更简单的选择......此外，无论如何你会通过使用jQuery 获得更多
