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

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

2021年

thiagola92 的答案有两个可能的改变。

1. 异步等待 - 如果愿意

2. 在innerText上插入AdjacentHTML（更快）

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

2019
使用提取

<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所说，它是现代浏览器的功能

Answer 5

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

Answer 6

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

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