admin管理员组

文章数量:1313729

Let's say I have an index.html page with a nav menu and I have 15 other html pages with the exact same menu.

Is it possible with html/css/js to update ONE file (say the index.html file), and all the updates are applied throughout all 15 documents?

I know you can do this with PHP but the page that I'm running doesn't use a PHP index file so I'm looking for another way.

Perhaps there's some other way to achieve this? Angular JS maybe? Any suggestions or links you can suggest to read/learn how to do this?

Let's say I have an index.html page with a nav menu and I have 15 other html pages with the exact same menu.

Is it possible with html/css/js to update ONE file (say the index.html file), and all the updates are applied throughout all 15 documents?

I know you can do this with PHP but the page that I'm running doesn't use a PHP index file so I'm looking for another way.

Perhaps there's some other way to achieve this? Angular JS maybe? Any suggestions or links you can suggest to read/learn how to do this?

  • javascript
  • html
Share Improve this question asked Jul 13, 2018 at 13:22 Nick0989Nick0989 4595 silver badges18 bronze badges 3
  • js templates - look @ mustache.js – albert Commented Jul 13, 2018 at 13:28
  • someone gave an iframe solution already, you can also use server side includes, they still work, but it is almost certainly more trouble than it is worth. – NappingRabbit Commented Jul 13, 2018 at 13:29
  • you can also use javascript and fill an [ANY] element dynamically. think I need more information to make any remendation for your use case. – NappingRabbit Commented Jul 13, 2018 at 13:30
Add a ment  | 

6 Answers 6

Reset to default 2

Synchronizing tabs is available through localStorage and the StorageEvent. More info you can find on MDN

Once your nav is updated, you are calling localStorage.setItem(someKey, someValue), and with the window.addEventListener('storage', this.handleStorageEvent) handling the change of the localStorage on other tabs. Tab on which the event was fired will not propagate the change of localStorage.

Hope my answer helped :3

To do this JUST with HTML, you could use an iframe, with <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>

And then include that in places with

<iframe src="/nav.html"></iframe>

Remember that the contents of an iframe should still be a valid HTML document, so you'll want a doctype, a head, a body, and CSS includes in nav.html too. Iframes also typically e with some default border and padding styles you'll need to get rid of.

However I would be amiss if I didn't say that the typical way of actually acplishing this is by using a server side language such as PHP to dynamically build the menu on each page.

you can do it by XML http request... you just need to define all navigation header,menu in one file and refer with one div in all pages... 

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

Include that nav as a snippet through all the pages, so eventually you will update one file and all the other pages will have these updates too. Check for more https://www.w3schools./howto/howto_html_include.asp

Try this:

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

Can you use JQuery? :D

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

Yes - it's possible and a requirement for any kind of non-trivial sized site.

The general way of doing such things without getting too sophisticated is this. In your HTML files you include some templates. Those templates control the general look and feel of your site. All of your HTML files include the same templates. If you want something different on a particular page you override your templates in that particular html file.

It ends up looking like this:

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

In your style.css and your custom.js you can go to town customizing. You can add more stylesheets and more javascript scripts as needed. Most sites have more style and javascript than content. A lot more.

My favorite site to learn about these technologies is the Mozilla Developer Network, but there are plenty of other great resources too.

本文标签： javascriptIs there a way to update one html element that updates across all documentsStack Overflow

版权声明：本文标题：javascript - Is there a way to update one html element that updates across all documents? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741958761a2407144.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。