如何使用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上有这个插件，它将内容加载到一个元素中。 这是回购
假设我正确地理解你的问题，并且想要将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"/>
