logo标签列表

有没有一种方法可以更新一个HTML元素，以便在所有文档中都更新？

javascripthtml
4
假设我有一个带有导航菜单的index.html页面，还有15个其他完全相同菜单的html页面。
使用html/css/js能否更新一个文件（比如说index.html），并且所有更改都应用于这15个文档中？
我知道你可以使用PHP来做到这一点，但我运行的页面没有使用PHP索引文件，因此我正在寻找另一种方法。
也许有其他方法可以实现这一点？ AngularJS可能吗？你有什么建议或链接可以学习如何做到这一点吗？
js模板 - 查看mustache.js - albert
有人已经提供了一个iframe的解决方案，你也可以使用“服务器端包含”，它们仍然有效，但几乎肯定会带来更多麻烦，不值得这样做。 - NappingRabbit
你可以使用JavaScript动态地填充[ANY]元素。我认为我需要更多的信息才能为您的用例做出任何建议。 - NappingRabbit
6个回答
2

通过使用localStorage和StorageEvent，可以同步标签页。您可以在MDN上找到更多信息。

一旦更新了您的nav，您将调用localStorage.setItem(someKey, someValue)，并使用window.addEventListener('storage', this.handleStorageEvent)处理其他标签页上localStorage的更改。事件被触发的标签页不会传播localStorage的更改。

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

1
这看起来是一个不错的方法。非常感谢，我会尝试一下。这里有很多我不知道的不错的答案。 - Nick0989
虽然我个人没有亲自实践过，但我认为这应该能够完成工作。如果有效，请告诉我一声；） - Sangsom
1

如果只用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）在每个页面上动态构建菜单，那就有些过失了。
1

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

是的 - 这是可能的，对于任何规模较大的网站都是必须的。

不需要太复杂的操作，通用的方法是在 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开发者网络，但也有很多其他优秀的资源。
顺便说一句，我剥离了任何不必要的内容以展示这个概念。你仍然可以加入像<title>...这样的东西。 - keithpjolley
哦 - 另一个很棒的资源是去你喜欢的任何网站，看看他们是如何实现的。我使用Chrome浏览器，所以我会“右键单击”我想要了解的内容，然后选择“检查”。 - keithpjolley
1

试试这个：

    <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>
我可以使用jQuery，这似乎非常简单。我原本打算使用w3schools的html include文档，但这看起来更快。 - Nick0989
@Nick0989 很好！别忘了将其标记为答案；-) - PKCS12
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接