Question

我的网站始终使用相同的导航菜单，而不是为每个页面重写HTML代码，我可以像使用CSS一样链接到第二个HTML文件（包含导航HTML代码）吗？或者这会产生问题吗？

Answer 1

简单的方法是将标题部分放在一个单独的html文件中。

现在使用jQuery load函数

在html代码中加载此文件

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

知道这将需要Web服务器，因为加载功能会向服务器发送请求。

查看代码示例：

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

Answer 2

对于HTML解决方案 - ，因为您的问题中没有其他标记 - 有HTML导入：

<link rel="import" href="nav.html">

但是这个新的工作草案 - 它没有良好的浏览器支持。

资源：

Answer 3

这称为HTML包含，是，可能

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

备注

HTML没有简单的包含机制（iframe等框架除外，它有副作用）。

更好的解决方案是使用Server-Side includes，这是在服务器上添加公共部分的首选方法，当然。

Answer 4

W3schools有一个包含。他们也有自己的CSS作为旁注。将callup放在页脚（任何地方）

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

然后在页面上：

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

你能链接到HTML文件吗？

4 个答案: