Question

比方说，我有一个带有导航菜单的index.html页面，而我还有其他15个带有完全相同菜单的html页面。

使用html / css / js是否可以更新一个文件（例如index.html文件），并且所有更新都适用于全部15个文档？

我知道您可以使用PHP来执行此操作，但是我正在运行的页面未使用PHP索引文件，因此我正在寻找另一种方法。

也许还有其他方法可以做到这一点？角JS也许？您可以建议阅读/学习如何做的任何建议或链接吗？

Answer 1

要使用HTML做到这一点，您可以使用带有<a target="_parent">的iframe：

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）在每个页面上动态构建菜单，那我就会感到茫然。

Answer 2

可以通过localStorage和StorageEvent使用“同步”选项卡。您可以在MDN

上找到更多信息

nav更新后，您将呼叫localStorage.setItem(someKey, someValue)，并由window.addEventListener('storage', this.handleStorageEvent)处理其他选项卡上localStorage的更改。触发事件的标签不会传播localStorage的更改。

希望我的回答有所帮助：3

Answer 3

您可以通过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>

Answer 4

是的-对于任何类型的非凡规模的网站都是可能的，而且是一个要求。

做这些事情而又不会太复杂的一般方法是这样的。在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 Developer Network，但是还有很多其他的好资源。

Answer 5

在所有页面中都包含该导航作为摘要，因此最终您将更新一个文件，而其他所有页面也将具有这些更新。检查更多https://www.w3schools.com/howto/howto_html_include.asp

Answer 6

尝试一下：

    <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>

有没有一种方法可以更新在所有文档中更新的html元素？

6 个答案: