【问题标题】：How do I load an HTML page in a div using JavaScript?如何使用 JavaScript 在 div 中加载 HTML 页面？
【发布时间】：2013-07-12 06:31:41
【问题描述】：

我希望 home.html 加载到 <div id="content">。

<div id="topBar"> <a href ="#" onclick="load_home()"> HOME </a> </div>
<div id ="content"> </div>
<script>
      function load_home(){
            document.getElementById("content").innerHTML='<object type="type/html" data="home.html" ></object>';
  }
</script>

当我使用 Firefox 时，这很好用。当我使用谷歌浏览器时，它要求插件。如何让它在 Google Chrome 中运行？

【问题讨论】：

记得返回false，如load_home(); return false
没有库就不容易了。加载到 iFrame 中可能会更好。看看这个帖子：stackoverflow.com/questions/14470135/…
home.html 是一个简单的网页，我只是将其命名为 home。 @jayharris
而您正在尝试将该页面上的所有内容加载到内容元素中，或者只是在内容元素中放置指向该页面的链接？
我正在尝试将该页面上的所有内容加载到内容元素中。我编辑了这个问题。 @adeneo

标签： javascript html google-chrome

【解决方案1】：

可以使用jQuery加载功能：

<div id="topBar">
    <a href ="#" id="load_home"> HOME </a>
</div>
<div id ="content">        
</div>

<script>
$(document).ready( function() {
    $("#load_home").on("click", function() {
        $("#content").load("content.html");
    });
});
</script>

对不起。针对点击而不是加载进行编辑。

【讨论】：

您好，我尝试使用此方法，但无法使用。如果你愿意，我可以提出一个新问题。谢谢。我的小提琴在这里：jsfiddle.net/ekareem/aq9Laaew/288345

【解决方案2】：

获取 API

function load_home (e) {
    (e || window.event).preventDefault();

    fetch("http://www.yoursite.com/home.html" /*, options */)
    .then((response) => response.text())
    .then((html) => {
        document.getElementById("content").innerHTML = html;
    })
    .catch((error) => {
        console.warn(error);
    });
}

XHR API

function load_home (e) {
  (e || window.event).preventDefault();
  var con = document.getElementById('content')
  ,   xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function (e) { 
    if (xhr.readyState == 4 && xhr.status == 200) {
      con.innerHTML = xhr.responseText;
    }
  }

  xhr.open("GET", "http://www.yoursite.com/home.html", true);
  xhr.setRequestHeader('Content-type', 'text/html');
  xhr.send();
}

根据您的限制，您应该使用 ajax 并确保在调用 load_home() 函数的标记之前加载您的 javascript

Reference - davidwalsh

MDN - Using Fetch

JSFIDDLE demo

【讨论】：

谢谢。但我的代码与项目的一部分有关。很抱歉，我不打算在项目工作中使用 iframe。我编辑了这个问题。看看@jay harris
@Jay Harris：同源政策怎么样？
@ArunRaj 您无法在 javascript 中加载来自另一个网站的页面，因为这是一个安全问题。但是你可以从你的服务器加载一个脚本，然后加载另一个页面并通过 ajax 将其回显到 javascript。
将Content-Type 标头添加到GET 请求没有意义 - 我认为您的意思是setRequestHeader("Accept", "text/html")？

【解决方案3】：

我终于找到了问题的答案。解决办法是

function load_home() {
     document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}

【讨论】：

尽管这很优雅和干净，但我想如果你真的通过 DOM api 创建对象元素会更好。
攻击速度慢且不安全 - 请参阅下面的答案（太长，无法发表评论）
@DavidMaes 你有什么建议？你能展示一个样本吗？
虽然这可能不安全，但如果您正在做一个简单的“桌面文件夹中的本地”开发，这很好 - 不是每个人都在运行银行网站，客户处理银行账户信息和遇到 XSS 攻击。感谢您的解决方案，出于我的需要，我最终不得不走另一条路线并需要 python 服务器并使用常规的 Jquery load() 函数来外部动态加载的 html。但这有助于我解决问题
@KamilKiełczewski type="type/html" 更改为 type="text/html"

【解决方案4】：

使用时

$("#content").load("content.html");

然后记住你不能在本地“调试”chrome，因为 XMLHttpRequest 无法加载——这并不意味着它不起作用，它只是意味着你需要在同一个域上测试你的代码。你的服务器

【讨论】：

"jQuery" != "javascript" || jQuery

【解决方案5】：

showhide.html

<!DOCTYPE html>
<html>
    <head>
      <script type="text/javascript">
        function showHide(switchTextDiv, showHideDiv)
        {
          var std = document.getElementById(switchTextDiv);
          var shd = document.getElementById(showHideDiv);
          if (shd.style.display == "block")
          {
            shd.style.display = "none";
            std.innerHTML = "<span style=\"display: block; background-color: yellow\">Show</span>"; 
          }
          else
          {
            if (shd.innerHTML.length <= 0)
            {
              shd.innerHTML = "<object width=\"100%\" height=\"100%\" type=\"text/html\" data=\"showhide_embedded.html\"></object>";
            }
            shd.style.display = "block";
            std.innerHTML = "<span style=\"display: block; background-color: yellow\">Hide</span>";
          }
        }
      </script>
    </head>
    <body>
      <a id="switchTextDiv1" href="javascript:showHide('switchTextDiv1', 'showHideDiv1')">
        <span style="display: block; background-color: yellow">Show</span>
      </a>
      <div id="showHideDiv1" style="display: none; width: 100%; height: 300px"></div>
    </body>
</html>

showhide_embedded.html

<!DOCTYPE html>
<html>
    <head>
      <script type="text/javascript"> 
        function load()
        {
          var ts = document.getElementById("theString");
          ts.scrollIntoView(true);
        }
      </script>
    </head>
    <body onload="load()">
      <pre>
        some text 1
        some text 2
        some text 3
        some text 4
        some text 5
        <span id="theString" style="background-color: yellow">some text 6 highlight</span>
        some text 7
        some text 8
        some text 9
      </pre>
    </body>
</html>

【讨论】：

回答与问题不对应的答案，也已由提出问题的同一人回答

【解决方案6】：

你可以使用jQuery：

$("#topBar").on("click",function(){
        $("#content").load("content.html");
});

【讨论】：

请解释你的答案。这看起来也像 jQuery，OP 在问题中没有提到。
先生这里还有一些答案在 jquery 中
jQuery 是执行此类 Ajax 调用的标准；所以我觉得答案简洁而恰当。

【解决方案7】：

github上有这个插件可以将内容加载到元素中。这是回购

https://github.com/abdi0987/ViaJS

【讨论】：

【解决方案8】：

我看到这个并认为它看起来很不错，所以我对其进行了一些测试。

这似乎是一种干净的方法，但在性能方面，与使用 jQuery 加载函数或使用 XMLHttpRequest 的 vanilla javascript 方法加载页面所花费的时间相比，它的性能落后了 50%，这与每种方法大致相似其他。

我想这是因为在后台它以完全相同的方式获取页面，但它还必须处理构建一个全新的 HTMLElement 对象。

总的来说，我建议使用 jQuery。该语法尽可能易于使用，并且它有一个结构良好的回调供您使用。它也相对较快。普通方法可能会快几毫秒，但语法令人困惑。我只会在无法访问 jQuery 的环境中使用它。

这是我用来测试的代码 - 它相当简陋，但多次尝试后的时间非常一致，所以我会说每种情况下精确到 +- 5ms 左右。测试是从我自己的家庭服务器在 Chrome 中运行的：

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
    <div id="content"></div>
    <script>
        /**
        * Test harness to find out the best method for dynamically loading a
        * html page into your app.
        */
        var test_times  = {};
        var test_page   = 'testpage.htm';
        var content_div = document.getElementById('content');

        // TEST 1 = use jQuery to load in testpage.htm and time it.
        /*
        function test_()
        {
            var start = new Date().getTime();
            $(content_div).load(test_page, function() {
                alert(new Date().getTime() - start);
            });
        }

        // 1044
        */

        // TEST 2 = use <object> to load in testpage.htm and time it.
        /*
        function test_()
        {
            start = new Date().getTime();
            content_div.innerHTML = '<object type="text/html" data="' + test_page +
            '" onload="alert(new Date().getTime() - start)"></object>'
        }

        //1579
        */

        // TEST 3 = use httpObject to load in testpage.htm and time it.
       function test_()
       {
           var xmlHttp = new XMLHttpRequest();

           xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
                {
                   content_div.innerHTML = xmlHttp.responseText;
                   alert(new Date().getTime() - start);
                }
            };

            start = new Date().getTime();

            xmlHttp.open("GET", test_page, true); // true for asynchronous
            xmlHttp.send(null);

            // 1039
        }

        // Main - run tests
        test_();
    </script>
</body>
</html>

【讨论】：

我认为您的意思不是“准确”，而是“精确”。
我的意思是我运行了很多次，每次只有几毫秒的摆动。所以给出的时间精确到 +- 5ms 或接近这个值。抱歉，我可能没有完全清楚那里。

【解决方案9】：

如果您的 html 文件位于本地，则使用 iframe 而不是标签。标签不能跨浏览器工作，主要用于 Flash

例如：<iframe src="home.html" width="100" height="100"/>

【讨论】：

【解决方案10】：

以现代 Javascript 方式获取 HTML

这种方法利用了现代 Javascript 功能，例如 async/await 和 fetch API。它将 HTML 下载为文本，然后将其提供给容器元素的 innerHTML。

/**
  * @param {String} url - address for the HTML to fetch
  * @return {String} the resulting HTML string fragment
  */
async function fetchHtmlAsText(url) {
    return await (await fetch(url)).text();
}

// this is your `load_home() function`
async function loadHome() {
    const contentDiv = document.getElementById("content");
    contentDiv.innerHTML = await fetchHtmlAsText("home.html");
}

await (await fetch(url)).text() 可能看起来有点棘手，但很容易解释。它有两个异步步骤，您可以像这样重写该函数：

async function fetchHtmlAsText(url) {
    const response = await fetch(url);
    return await response.text();
}

有关详细信息，请参阅fetch API documentation。

【讨论】：

对于那些在使用它时遇到问题的人，请确保这些函数是在“window.onload”函数之外编写的。
显示 de bola é o que eu queria。

【解决方案11】：

$("button").click(function() {
    $("#target_div").load("requesting_page_url.html");
});

或

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

【讨论】：

【解决方案12】：

当您想要包含 header.php 或任何页面时，通常需要这样做。

在 Javascript 中这很容易，特别是如果您有 HTML 页面并且不想使用 php 包含函数，但您应该编写 php 函数并将其添加为脚本标记中的 Javascript 函数。

在这种情况下，您应该在没有函数的情况下编写它，后跟名称 Just。脚本怒斥功能词并启动包含 header.php 即将 php 包含函数转换为脚本标记中的 Javascript 函数，并将所有内容放在该包含文件中。

【讨论】：

【解决方案13】：

试试

async function load_home(){
  content.innerHTML = await (await fetch('home.html')).text();
}

async function load_home() {
  let url = 'https://kamil-kielczewski.github.io/fractals/mandelbulb.html'

  content.innerHTML = await (await fetch(url)).text();
}

<div id="topBar"> <a href="#" onclick="load_home()"> HOME </a> </div>
<div id="content"> </div>

【讨论】：

【解决方案14】：

使用这个简单的代码

<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>```

【讨论】：

w3.includeHTML() 未定义
对于那些想知道的人，w3-include-HTML 是 W3Schools.com 的 W3.JS 脚本库的一部分（可在此处获得：w3schools.com/w3js/default.asp）。我想指出 W3Schools（以及 w3.js 和 w3.includeHTML()）与 W3 联盟（定义 HTML+CSS+DOM 标准的两个主要组之一（另一个组是 WHATWG )。

【解决方案15】：

<script>
var insertHtml = function (selector, argHtml) {
$(document).ready(function(){

    $(selector).load(argHtml);
 
});
var targetElem = document.querySelector(selector);
    targetElem.innerHTML = html;
};

var sliderHtml="snippets/slider.html";//url of slider html
var items="snippets/menuItems.html";
insertHtml("#main",sliderHtml);
insertHtml("#main2",items);
</script>

当我尝试将 HTML 的 sn-p 添加到我的 main.html 时，这个对我有用。请不要忘记在您的代码中添加 ajax 将 class 或 id 作为选择器传递，并将 HTML sn-p 的链接传递为 argHtml

【讨论】：

【解决方案16】：

我使用jquery，我发现它更容易

$(function() {
    $("#navigation").load("navbar.html");
});

在一个单独的文件中，然后在 html 页面上加载 javascript 文件

【讨论】：