Question

我很确定这是一个常见问题，但我对JS很陌生，并且遇到了一些麻烦。

我想在不使用iframe的情况下将x.html加载到ID为“y”的div中。我已经尝试了一些东西，四处寻找，但我找不到合适的解决方案。

如果可能，我更喜欢JavaScript中的内容。

先谢谢大家！

Answer 1

哇，从所有框架促销答案中你都会认为这是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＆lt; 8兼容性，请先执行此操作以使这些浏览器加快速度：

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

请注意，使用脚本将内容加载到页面中会使该内容对于没有JavaScript可用的客户端（例如搜索引擎）不可见。小心使用，如果您想要的只是将数据放在公共共享文件中，请考虑服务器端包含。

Answer 2

jQuery的：

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

Answer 3

我建议进入其中一个JS库。它们可确保兼容性，因此您可以非常快速地启动和运行。 jQuery和DOJO都很棒。例如，要做你在jQuery中尝试做的事情，它会是这样的：

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

Answer 4

2021

对 thiagola92 的回答进行了两项改进。

异步等待

insertAdjacentHTML overinnerText（更快）

<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>

Answer 5

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

Answer 6

2019 使用提取

<script>
fetch('page.html')
  .then(data => data.text())
  .then(html => document.getElementById('elementID').innerHTML = html);
</script>

<div id='elementID'> </div>

获取需要接收http或https链接，这意味着它将无法在本地使用。

Answer 7

http://www.boutell.com/newfaq/creating/include.html

这可以解释如何编写自己的客户端，但是jQuery很多，更容易选择......而且你还可以通过使用jQuery获得更多的东西

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

7 个答案: