Gil*_*eed 143 html javascript google-chrome
我想要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中运行？
Gil*_*eed 205
我终于找到了问题的答案.解决方案是
function load_home() {
document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}
Aar*_*ske 62
您可以使用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>
抱歉.编辑单击而不是加载.
Jay*_*ris 47
获取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
Sam*_*way 18
我看到了这个,觉得它看起来很不错所以我对它进行了一些测试.
这似乎是一种干净的方法,但就性能而言,与使用jQuery加载函数加载页面或使用XMLHttpRequest的大致相似的vanilla javascript方法所花费的时间相比,它滞后了50%.
我想这是因为它在引擎盖下以完全相同的方式获取页面,但它也必须处理构建一个全新的HTMLElement对象.
总之,我建议使用jQuery.语法尽可能简单易用,并且具有结构良好的回调供您使用.它也相对较快.vanilla方法可能会在几毫秒内变得更快,但语法却令人困惑.我只会在我无法访问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>
这种方法利用了现代的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 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文档.
尝试
async function load_home(){
content.innerHTML = await (await fetch('home.html')).text();
}
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();
}小智 5
使用时
$("#content").load("content.html");
然后记住你不能在本地chrome中"调试",因为XMLHttpRequest无法加载 - 这并不意味着它不起作用,它只是意味着你需要在同一个域上测试你的代码.你的服务器
您可以使用 jQuery ：
$("#topBar").on("click",function(){
$("#content").load("content.html");
});