我希望将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浏览器中正常运行?
我终于找到了解决我问题的方法。解决方法是
function load_home() {
document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}
您可以使用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>
抱歉。针对点击而非负载进行了编辑。
提取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方式获取HTML
这种方法利用了诸如async/await
和fetch
API之类的现代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文档。
我看到了这个,并认为它看起来不错,所以我对其进行了一些测试。
这似乎是一种干净的方法,但是与使用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>
使用时
$("#content").load("content.html");
然后请记住,您不能在本地chrome中“调试”,因为XMLHttpRequest无法加载-这并不意味着它不起作用,这仅意味着您需要在相同的域上测试代码。您的服务器
您可以使用jQuery:
$("#topBar").on("click",function(){
$("#content").load("content.html");
});
$("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>';
尝试
async function load_home(){
content.innerHTML = await (await fetch('home.html')).text();
}
github上有一个插件可以将内容加载到元素中。这是回购
https://github.com/abdi0987/ViaJS
当您要包含header.php或任何页面时,通常需要这样做。
在Java中,这很容易,尤其是如果您有HTML页面并且不想使用php include函数,但是您应该编写php函数并将其作为Java函数添加到script标签中。
在这种情况下,应编写不带函数的名称,后跟名称Just。脚本在功能词中启动并启动include header.php,即在Script标签中将php include函数转换为Java函数,并将所有内容放入该include文件中。
使用这个简单的代码
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>```
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"/>
文章标签:google-chrome , html , javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!