使用 javascript 将 html 加载到另一个 html 中（没有外部文件）答案

【问题标题】：loading html into another html with javascript (without external files)使用 javascript 将 html 加载到另一个 html 中（没有外部文件）
【发布时间】：2012-07-27 11:46:58
【问题描述】：

我有一个用于将外部文件加载到 html 中的代码。如何在不导入外部文件或任何库的情况下做到这一点，所以在 html 中我可以输入一个简短的脚本，它会加载另一个页面？到目前为止我使用这个脚本：

$(document).ready(function(){
        $('#outer').load('html_file.html');
});

但它需要有额外的文件 + 库。如何直接在 html 中完成所有操作？

有什么想法吗？

基本上我想在新网站中包含整个另一个网站，但我只能在 html 文件中使用 html + javascript。所有的css文件都会在导入的文件中存储和引用。

【问题讨论】：

是ajax吗？还是jQuery？你试过了吗？
如果你想包含整个其他网站，你可以不只使用 iFrame 吗？
您已经在代码中使用了 jQuery。这应该足够了。从这里下载 jQuery code.jquery.com/jquery-1.7.2.js
好吧，$('#outer').load('http://www.yoursite.com'); 怎么样？
不清楚你在问什么。您是否希望使用 jQuery 而无需导入 jQuery 库？不，浏览器没有内置 jQuery。您可以手动编写所需的功能。或者我猜想将 jQuery 库复制/粘贴到您页面中的 script 标记中。但我看不出有什么理由。为什么不直接使用你已经在使用的东西？

标签： javascript html import

【解决方案1】：

使用这个“html”：

<script type="text/javascript">
window.onload = function() {
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject("Microsoft.XMLHTTP");
    xhr.open("GET", "html_file.html", false);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            document.getElementById("outer").innerHTML = xhr.responseText;
        }
    };
    xhr.send(null);
};
</script>

【讨论】：

@Esailija 好吧好吧，好吧，XMLHttpRequest 又回来了。自从$.ajax 之后就没见过 :)
@PiotrCiszewski 请查看是否有任何错误。你也用过我最新的编辑吗？我的初始代码是错误的。它在这里工作正常：jsfiddle.net/VfeaA
对不起，我还不能投票，声望太小了。但你应该得到大量的投票！谢谢
@PiotrCiszewski 您可以接受答案。有关说明，请参阅here。您只需单击投票按钮下方的白色复选标记即可。