有沒有辦法更新一個更新所有文檔的html元素？
[英]Is there a way to update one html element that updates across all documents?
問題描述
假設我有一個帶導航菜單的index.html頁面，我有15個其他html頁面，菜單完全相同。
是否可以使用html / css / js更新一個文件（比如index.html文件），並且所有更新都應用於所有15個文檔中？
我知道你可以用PHP做到這一點，但我正在運行的頁面不使用PHP索引文件，所以我正在尋找另一種方式。
也許有其他方法來實現這一目標？ Angular JS也許？ 您可以建議閱讀/了解如何執行此操作的任何建議或鏈接？
6 個解決方案
解決方案1
1 2018-07-13 13:27:05
要使用HTML執行此操作，您可以使用iframe，使用<a target="_parent"> ：
nav.html
<ul>
<li><a href="/" target="_parent">Home</a></li>
<li><a href="/about.html" target="_parent">About</a></li>
</ul>
然后將其包括在
<iframe src="/nav.html"></iframe>
請記住，iframe的內容仍應是有效的HTML文檔，因此您也需要在nav.html中包含doctype，head，body和CSS。 iframe通常還帶有一些默認的邊框和填充樣式，你需要擺脫它們。
但是，如果我沒有說實際完成此操作的典型方法是使用PHP等服務器端語言來動態構建每個頁面上的菜單，那我就不錯了。
解決方案2
1 2018-07-13 13:28:34
可以通過localStorage和StorageEvent同步選項卡。 您可以在MDN上找到更多信息
更新nav ，您將調用localStorage.setItem(someKey, someValue) ，並使用window.addEventListener('storage', this.handleStorageEvent)處理其他選項卡上localStorage的更改。 觸發事件的選項卡不會傳播localStorage的更改。
希望我的回答有所幫助：3
解決方案3
1 2018-07-13 13:31:08
你可以通過XML http請求來做...你只需要在一個文件中定義所有導航標題，菜單並在所有頁面中引用一個div ...
<html>
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("include-html");
if (file) {
/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
};
<script>
includeHTML();
</script>
</body>
</html>
解決方案4
1 2018-07-13 13:34:50
是的 - 這是可能的，並且要求任何類型的非平凡大小的網站。
做這些事情而不太復雜的一般方法就是這樣。 在HTML文件中包含一些模板。 這些模板控制着您網站的一般外觀。 您的所有HTML文件都包含相同的模板。 如果您想在特定頁面上使用不同的內容，則可以覆蓋該特定html文件中的模板。
最終看起來像這樣：
<html>
<head>
<link rel="stylesheet" type="text/css" href="/include/css/style.css">
</head>
<body>
<div>
my content in here.
</div>
<script type="text/javascript" src="/include/js/custom.js"></script>
</body>
</html>
在你的style.css和你的custom.js你可以去城鎮定制。 您可以根據需要添加更多樣式表和更多JavaScript腳本。 大多數網站都有比內容更多的風格和JavaScript。 多很多。
我最喜歡的關於這些技術的網站是Mozilla開發者網絡 ，但是還有很多其他很棒的資源。
解決方案5
1 2018-07-13 13:34:54
將nav作為片段包含在所有頁面中，因此最終您將更新一個文件，所有其他頁面也將具有這些更新。 檢查更多https://www.w3schools.com/howto/howto_html_include.asp
解決方案6
1 2018-07-13 13:40:25
試試這個：
<div id="sideBar">
<!-- every page needs to have this -->
</div>
<div id ="content">
</div>
<script>
document.getElementById("sideBar").innerHTML='<object type="text/html" data="side.html" ></object>';
</script>
你能用JQuery嗎？ ：d
示例第1頁：
<div id="sideBar">
<!-- every page needs to have this -->
</div>
<div id ="content">
</div>
<script>
$(document).ready( function() {
$("#sideBar").load("side_content.html");
});
</script>
在Elasticsearch 1.5中是否可以通過查詢更新所有文檔？
[英]Is there a way to update all documents by query in Elasticsearch 1.5?
更新 document.cookie 更新所有 cookies onclick 而不僅僅是一個
[英]Update document.cookie updates all cookies onclick and not just one
Django中的AJAX-單擊元素會更新與更新腳本關聯的所有計數器。 我該如何預防？
[英]AJAX in Django - Clicking an element updates all counters tied to the update script. How can I prevent this?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.