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

我想要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中使用它?

我终于find了我的问题的答案。 解决scheme是

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

你可以使用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> 

抱歉。 点击进行编辑,而不是加载。

既然你正在寻找加载HTML内容,你应该尝试使用iframe,并确保你的JavaScript加载调用load_home()函数的标记之前

编辑:基于你的约束我编辑的JavaScript使用Ajax而不是一个iframe。 尝试这个

 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(); } 

JSFIDDLE演示

我看到这个,并认为它看起来相当不错,所以我跑了一些testing。

这似乎是一个干净的方法,但就性能而言,与使用jQuery加载函数加载页面或使用XMLHttpRequest的大致相似的香草JavaScript方法相比,它滞后了50%。

我想这是因为在底层,它以完全相同的方式获取页面,但它也必须处理构build一个全新的HTMLElement对象。

总之我build议使用jQuery。 语法的使用非常简单,它有一个很好的结构化的callback供您使用。 这也是相对较快的。 香草的方法可能会快几毫秒,但语法混乱。 我只会在我没有访问jQuery的环境中使用它。

这里是我用来testing的代码 – 这是相当基本的,但时间回来非常一致,跨多次尝试,所以我会说精确到每个案件大约+ – 5毫秒。 我的家庭服务器在Chrome中运行testing:

 <!DOCTYPE html> <html> <head> <script src="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> 

使用时

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

然后记住,你不能在本地chrome中“debugging”,因为XMLHttpRequest无法加载 – 这并不意味着它不工作,这只是意味着你需要在同一个域上testing你的代码。 你的服务器

你可以使用jQuery:

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

在github上有这个插件,它将内容加载到一个元素中。 这是回购

https://github.com/abdi0987/ViaJS

假设我正确地理解你的问题,并且想要将home.html的内容加载到div中,而不使用诸如jQuery之类的外部库,那么使用iFrame可能会更好。

您应该能够像Div一样设置iFrame的样式,并在click事件中加载src。 或者,如果你想变得棘手,使用一个隐藏的iFrame,并将src的结果传递给javascript – 只有当你在同一个域时才能完成。

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> 

如果你的html文件驻留在本地,那么去iframe而不是标签。 标签不能跨浏览器工作,并且主要用于Flash

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