我希望 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 时，这很好用。当我使用谷歌浏览器时，它要求插件。我如何让它在谷歌浏览器中工作？
我终于找到了我的问题的答案。解决办法是
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>
对不起。针对点击而不是加载进行编辑。
获取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
这种方法利用了现代 Javascript 功能，例如async/await和fetchAPI。它将 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 文档。
我看到了这个，觉得它看起来很不错，所以我对它进行了一些测试。
这似乎是一种干净的方法，但在性能方面，与使用 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>