[英]How do I load an HTML page in a div using JavaScript?
我想讓 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 加載功能：
<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和fetch API。 它將 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>
使用時
$("#content").load("content.html");
然后請記住，您不能在本地的 chrome 中“調試”，因為 XMLHttpRequest 無法加載——這並不意味着它不起作用，這只是意味着您需要在同一個域上測試您的代碼。 你的服務器
嘗試
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(); }
<div id="topBar"> <a href="#" onclick="load_home()"> HOME </a> </div> <div id="content"> </div>
您可以使用 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>';
<script>
var insertHtml = function (selector, argHtml) {
$(document).ready(function(){
$(selector).load(argHtml);
});
var targetElem = document.querySelector(selector);
targetElem.innerHTML = html;
};
var sliderHtml="snippets/slider.html";//url of slider html
var items="snippets/menuItems.html";
insertHtml("#main",sliderHtml);
insertHtml("#main2",items);
</script>
當我嘗試將 HTML 片段添加到我的 main.html 時，這個對我有用。 請不要忘記在您的代碼傳遞類或 id 中添加 ajax 作為選擇器，並將指向 HTML 片段的鏈接添加為argHtml
github 上有這個插件可以將內容加載到元素中。 這是回購
當您想要包含 header.php 或任何頁面時，通常需要這樣做。
在 Javascript 中，這很容易，特別是如果您有 HTML 頁面並且不想使用 php 包含函數，但您應該編寫 php 函數並將其添加為腳本標記中的 Javascript 函數。
在這種情況下，您應該在不帶函數的情況下編寫它，后跟名稱 Just。 Script rage the function word 並啟動include header.php 即將php include 函數轉換為script 標簽中的Javascript 函數，並將您的所有內容放在包含的文件中。
使用這個簡單的代碼
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>```
我使用 jquery，我發現它更容易
$(function() {
$("#navigation").load("navbar.html");
});
在一個單獨的文件中，然后在 html 頁面上加載 javascript 文件
//load page via jquery-ajax $.ajax({ url: "https://stackoverflow.com/questions/17636528/how-do-i-load-an-html-page-in-a-div-using-javascript", context: document.body }).done(function(data) { //the previous request fails beceaus we dont have CORS on this url.... just for illlustration... //get a list of DOM-Nodes var dom_nodes = $($.parseHTML(data)); //find the question-header var content = dom_nodes.find('#question-header'); //create a new div and set the question-header as it's content var newEl = document.createElement("div"); $(newEl).html(content.html()); //on our page, insert it in div with id 'inserthere' $("[id$='inserthere']").append(newEl); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>part-result from other page:</p> <div id="inserthere"></div>
我不使用框架或庫（如果客戶確實願意，我的客戶可能會使用），盡管我的Web平台不會受到過多和浪費帶寬的負擔。 下面的功能是我為將XML直接添加到after ， before ， inside （成為最后一個元素）或replace和現有元素而編寫的。 沒有不可靠的垃圾，如innerHTML （在許多瀏覽器中找不到以這種方式“添加” id垃圾，因此不可靠）。 在下面的示例中使用的獨立必備功能在本文的底部。
after ， before ， inside和replace ）。 id_('content')或用於一個字符串id的元素。 <div xmlns="http://www.w3.org/1999/xhtml"><p>everything in here</p></div> ）。 function xml_add(pos, e, xml)
{
e = (typeof e == 'string' && id_(e)) ? id_(e) : e;
if (e.nodeName)
{
if (pos=='after') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e.nextSibling);}
else if (pos=='before') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
else if (pos=='inside') {e.appendChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true));}
else if (pos=='replace') {e.parentNode.replaceChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
//Add fragment and have it returned.
}
}
通過AJAX將XML加載到DOM中， 正確地需要在根元素（您可能沒有多個根元素，或者如果有）上的XML名稱空間（ xmlns="http://www.w3.org/1999/xhtml" ）您將不得不進行迭代）。 然后，您需要使用importNode 。 功能的其余部分是在 XML（AJAX，從另一個功能等）是相對於所述DOM其它元件被放置僅僅是語義。
element.appendChild(new DOMParser().parseFromString('<div xmlns="http://www.w3.org/1999/xhtml">'+id_('post_body').value+'</div>'),'application/xml'.childNodes[0]);
after特定元素after添加XML：
xml_add('after', id_(push_current_id()).tag_('footer')[0], '<div class="hidden" id="editor_rich_temp"></div>');
before特定元素before添加XML：
xml_add('before', $('#'+push_current_id()+' section')[0], '<h2 xmlns="http://www.w3.org/1999/xhtml"><span>Compose Message</span></h2>');
inside特定元素inside添加XML（成為最后一個子元素）：
xml_add('inside', $('body > header > nav')[1], xml);
這些是我在平台上使用的功能，可避免使用五份框架/庫副本懲罰用戶並確保高性能：
function $(o) {var r = false; if (document.querySelectorAll) {r = document.querySelectorAll(o);} return r;}
function class_(c) {return (document.getElementsByClassName(c)) ? document.getElementsByClassName(c) : false;}
function tag_(t) {return (document.getElementsByTagName(t)) ? document.getElementsByTagName(t) : false;}
如果您想要干凈的專業JavaScript，則需要使用prototype ，這真是太好了。 在實例id_('example').tag_('td')[0].class_('good')[0]作品比搞亂容易得多 $環路內。
Object.prototype.$ = function(c) {return (this.querySelectorAll && this.querySelectorAll(c) && this.querySelectorAll(c).length > 0) ? this.querySelectorAll(c) : false;}
Object.prototype.class_ = function(c) {return (this.getElementsByClassName && this.getElementsByClassName(c) && this.getElementsByClassName(c).length > 0) ? this.getElementsByClassName(c) : false;}
Object.prototype.tag_ = function(t) {return (this.getElementsByTagName && this.getElementsByTagName(t) && this.getElementsByTagName(t).length > 0) ? this.getElementsByTagName(t) : false;}
我在極少數情況下更新代碼（因為它堅如磐石，而不是“版本”依賴性）。 通過對純JavaScript進行編程，可以輕松避免大量的低性能框架和庫。 https://www.jabcreations.com/docs/javascript/#functions
顯示隱藏文件.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"/>
如何使用 jQuery/AJAX 在 HTML div 內加載 html 頁面內容？
[英]How do I load html page content inside of an HTML div using jQuery/AJAX?
如何使用 JavaScript 或 JQuery 在頁面加載時更改 Div 元素的樣式寬度？
[英]How do I change Style Width of Div Element on Page load using JavaScript or JQuery?
如何在頁面加載時預加載Javascript編寫的HTML？
[英]How do I preload HTML that is written by a Javascript on page load?
如何使用onclick使用javascript將視頻加載到HTML5頁面
[英]How do I load a video into a HTML5 page with javascript using onclick
如何在頁面加載時使用 javascript 按字母順序對 html 列表進行排序
[英]How do I sort html list alphabetically using javascript on page load
如何使用JavaScript在特定HTML div中顯示消息？
[英]How do I display message in a particular HTML div using JavaScript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.