你可以链接到一个HTML文件吗？

Question

你可以链接到一个HTML文件吗？

html

5

我的网站在每个页面上都有相同的导航菜单，我是否可以像使用CSS那样链接到第二个HTML文件（包含导航HTML代码），而不是为每个页面重写HTML代码？这样做会带来问题吗？

- Emmet Arries

也许是 https://dev59.com/8mox5IYBdhLWcg3ww28D 的重复问题？希望能有所帮助。 - AndySw

你可能需要一个模板框架来完成这个任务。市面上有大约一百万种不同的框架可供选择。我使用的是Jekyll，但也有其他适合HTML初学者的框架。或者你可以使用服务器端包含（SSI）。 - Maximillian Laumeister

感谢您的提示和链接！ - Emmet Arries

4个回答

5

对于一个HTML解决方案 - 因为您的问题中没有其他标签 - 可以使用HTML导入：

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

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

资源：

- Mi-Creativity

抱歉没有标签，我不确定需要什么！我可能会使用服务器端的JavaScript/jQuery解决方案！谢谢您的回复！ - Emmet Arries

当然，我一直使用服务器端来处理这个问题，同时也像其他人建议的那样使用js框架。 - Mi-Creativity

你有可以分享的代码吗？之前有些讨论提到了代码，但还没有提供。你推荐使用哪个JS框架？或者有其他建议吗？我对网站设计还很新，乐于接受任何建议。 - Emmet Arries

PHP <?php include_once('includes/sidebar.php'); ?>，使用 AngularJS 可以这样实现 <div ng-include="'includes/navbar.html'"></div> ng-include 示例 - Mi-Creativity

再次感谢！W3Schools的链接，我喜欢它们！ - Emmet Arries

5

那被称为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这样具有副作用的框架）。

更好的解决方案是使用服务器端包含，这是向文档添加常见部分的首选方式，当然是在服务器上进行。

- Peyman Mohamadpour

1

这需要 JavaScript 对吧？像 <script src="w3-include-HTML.js"></script> 这样的？ - Mi-Creativity

谢谢你提供的代码和回复！我会研究一下服务器端包含（Server-Side includes）！ - Emmet Arries

0

W3schools 有一个 include。另外，他们也拥有自己的 CSS。在页脚中放置调用（无论何处）。

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

- tradesouthwest

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pritesh · Accepted Answer

简单的方法是将标题部分放在一个单独的HTML文件中。现在使用jQuery的load函数加载此文件至HTML代码中。

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

请注意，这将需要一个Web服务器，因为load函数会向服务器发送请求。

查看代码示例：

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>