如何使用JavaScript在<div>中加载HTML页面？

161

我希望将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浏览器中正常运行？

javascript  html  google-chrome 
— 吉利威德
source
1
并记住要返回false，例如load_home(); return false
— mplungjan
2
没有库就不太容易。最好将其加载到iFrame中。看看这个帖子：stackoverflow.com/questions/14470135/…–
— sgeddes
1
home.html是一个简单的网页，我只是将其命名为home。@jayharris
— Giliweed 2013年
并且您正在尝试将该页面上的所有内容加载到content元素中，或者只是将指向该页面的链接放置在content元素中？
— adeneo
我正在尝试将该页面上的所有内容加载到content元素中。我编辑了问题。@adeneo
— 吉利威德2013年

Answers:

213

我终于找到了解决我问题的方法。解决方法是

function load_home() {
     document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}
— 吉利威德
source
3
即使这很优雅而且很干净，但我想如果您通过DOM api实际创建对象元素会更好。
— 大卫
3
这是缓慢且不安全的攻击-请参阅下面的回答（时间太长，无法置评）
— Sam Redway 2015年
1
@DavidMaes您有什么建议？你可以拿出一个样品吗？
— Xsmael
2
尽管这可能不安全，但是如果您正在执行简单的“在桌面上的本地文件夹中”开发，那就很好了–并非每个人都在运行一个银行网站，客户正在处理银行帐户信息并遭受XSS攻击。感谢您的解决方案，由于我的需要，我最终不得不走另一条路线，并且需要python服务器，并对外部动态加载的html使用常规的Jquery load（）函数。但这对帮助我解决问题很有帮助
— rwarner
1
@KamilKiełczewski type="type/html"改为type="text/html"
— 傻眼了
63

您可以使用jQuery load函数：

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

抱歉。针对点击而非负载进行了编辑。

— 亚伦·利斯克（Aaron Liske）
source
嗨，我尝试使用此方法，但无法正常工作。如果您愿意，我可以打开一个新问题。谢谢。我的小提琴在这里：jsfiddle.net/ekareem/aq9Laaew/288345
— NoChance
52

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

参考-DavidWalsh

MDN-使用提取

JSFIDDLE演示

— 杰伊·哈里斯（Jay Harris）
source
谢谢。但我的代码与项目的一部分有关。很抱歉，我不打算在项目工作中使用iframe。我编辑了问题。看看@jay harris
— 吉利维德
1
@杰伊·哈里斯（Jay Harris）：相同的原产地政策如何？
— ArunRaj 2014年
1
@ArunRaj，您不能加载javascript内来自另一个网站的页面，因为这是安全问题。但您可以从服务器加载脚本，而脚本又会加载该其他页面，并通过ajax将其回显为javascript。
— 杰·哈里斯
1
向请求添加Content-Type标头GET没有任何意义-我认为您的意思是setRequestHeader("Accept", "text/html")？
— mindplay.dk
24

以现代的Javascript方式获取HTML

这种方法利用了诸如async/await和fetchAPI之类的现代Javascript功能。它将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文档。

— 卢西奥·帕瓦（Lucio Paiva）
source
对于那些在使用该程序时遇到问题的人，请确保这些函数是在“ window.onload”函数之外编写的。
— 冬季卡拉
19

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

这似乎是一种干净的方法，但是与使用jQuery加载功能加载页面或使用XMLHttpRequest的普通javascript方法加载页面所需的时间相比，它的性能落后了50％。

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

总之，我建议使用jQuery。该语法尽可能地易于使用，并且具有结构良好的回调供您使用。它也相对较快。原始方法可能会以不明显的几毫秒的速度更快，但是语法令人困惑。我只会在无法访问jQuery的环境中使用它。

这是我用来测试的代码-相当基本，但是多次尝试返回的时间非常一致，因此在每种情况下我都说精确到大约5毫秒。测试是通过我自己的家用服务器在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>
— 山姆·雷德威
source
1
我认为不是“准确”，而是“精确”。
— Pulse0ne
我的意思是我跑了很多次，每次只有几毫秒的摆动。因此，给出的时间精确到±5ms或接近5ms。抱歉，我可能还不太清楚。
— 山姆·雷德韦
6

使用时 

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

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

— 塞鲁普
source
5
“ jQuery”！=“ javascript” || jQuery <javascript || OP.indexOf（“ jQuery”）<1
— KittenCodings 2015年
4

您可以使用jQuery： 

$("#topBar").on("click",function(){
        $("#content").load("content.html");
});
— 安纳普
source
3
请解释您的答案。而且看起来像jQuery，OP在问题中没有提到。
— 戴维（David）
2
先生，这里还有更多答案在jquery中
— Anup 2015年
jQuery是执行此类Ajax调用的标准。所以我认为答案简明扼要。
— 卡
2

尝试

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

显示代码段

— 卡米尔（KamilKiełczewski）
source
1 
$("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>';
— 克里希纳·帕塔尔
source
0

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

在Java中，这很容易，尤其是如果您有HTML页面并且不想使用php include函数，但是您应该编写php函数并将其作为Java函数添加到script标签中。

在这种情况下，应编写不带函数的名称，后跟名称Just。脚本在功能词中启动并启动include header.php，即在Script标签中将php include函数转换为Java函数，并将所有内容放入该include文件中。

— 创新87
source
0

使用这个简单的代码

<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>```
— Cak Sup
source
w3.includeHTML（）未定义
— toing_toing
对于那些想知道的人，它w3-include-HTML是W3Schools.com W3.JS脚本库的一部分（可在此处找到：w3schools.com/w3js/default.asp）。我想指出的是W3Schools的（和w3.js和w3.includeHTML()）不符合W3联盟（定义HTML + CSS + DOM标准（另一组是WHATWG的两个主要群体之一没有任何关系）。
— 戴
-4

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>
— 鲁道夫·雷姆西克
source
1
回答与该问题不符的问题，也已经由提出该问题的同一人回答了此问题
— Katler，2014年
-5

如果您的html文件位于本地，则请使用iframe而不是标记。代码无法跨浏览器工作，并且主要用于Flash

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

— 贾恩·阿比舍克（Jain Abhishek）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.