Can you link to an HTML file?

前端未结

关注

 4  919

My website has the same navigation menu throughout, instead to rewriting the HTML code for every page, can I link to a second HTML file (that contains the nav HTML code) lik

相关标签:

4条回答

攒了一身酷

2020-12-11 08:21
for an HTML solution -since you have no other tags in your question- there is HTML imports:
```
<link rel="import" href="nav.html">
```
But this new -working draft- and it doesn't have good browser support.

Resources:
- W3C - imports
- MDN - HTML Imports
- caniuse - HTML Imports
- webcomponents.org - introduction to html imports
- html5rocks - imports
0 讨论(0)
发布评论:

提交评论
- 加载中...

北海茫月

2020-12-11 08:41

W3schools has an include. They also have there own CSS as a side note. Put the callup in footer (wherever)

<script src="vendor/w3js.min.js"></script>
<script src="w3.includeHTML();"></script>

And then on page:

<header class="header navbar-fixed-top">
    <nav id="inc_nav" w3-include-html="nav.html"></nav>
</header>

    <section id="inc_header" w3-include-html="header.html"></section>

    <div id="content" tabindex="-1"></div>

0 讨论(0)

庸人自扰

2020-12-11 08:44

That is called HTML includes, and YES, it is possible

<div w3-include-HTML="content.html">My HTML include will go here.</div>
<script>
(function () {
  myHTMLInclude();
  function myHTMLInclude() {
    var z, i, a, file, xhttp;
    z = document.getElementsByTagName("*");
    for (i = 0; i < z.length; i++) {
      if (z[i].getAttribute("w3-include-html")) {
        a = z[i].cloneNode(false);
        file = z[i].getAttribute("w3-include-html");
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (xhttp.readyState == 4 && xhttp.status == 200) {
            a.removeAttribute("w3-include-html");
            a.innerHTML = xhttp.responseText;
            z[i].parentNode.replaceChild(a, z[i]);
            myHTMLInclude();
          }
        }      
        xhttp.open("GET", file, true);
        xhttp.send();
        return;
      }
    }
  }
})();
</script>

NOTES

HTML doesn't have a simple include mechanism (except for frames like iframe, which have side effects).

A better solution would be to use Server-Side includes, which is the preferred way of adding common parts to your document, on the server, of course.

0 讨论(0)

故里飘歌

2020-12-11 08:45

Simple way would be to put the header part in a separate html file.

Now load this file in html code using jQuery load function like

$("#headerDiv").load("header.html")

Know that, this will require web server because load function sends a request to server.

Check out the code sample:

demo.html

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script> 
   $(function(){
    $("#headerDiv").load("header.html");
   });  
</script>
</head>
<body>
<div id="headerDiv"></div>
<!-- Rest of the code -->
</body>
</html>

header.html

<div >
    <a>something</a>
    <a>something</a>        
</div>

0 讨论(0)