如何在多个页面上重复使用导航栏？

Question

我刚刚完成了我的主页/index.html页面。为了让导航栏保持在原位，并且在用户点击所有页面时都保持不变，我需要复制并粘贴导航栏代码到每个页面的顶部吗？还是有其他更干净的方法可以做到这一点？

HTML导航：

<nav>
    <div>
        <a href="/">
            <div id="logo"><img src="image.png" alt="Home"/></div>
            <div id="headtag"><img src="image.png" alt="Home"/></div>
            <div id="tagline"><img src="image.png" alt="Home"/></div>
        </a>
    </div>
    <div> 
        <a href="/" class="here">Home</a>
        <a href="/about.html" >About</a>      
        <a href="/services.html" >Services</a>          
        <a href="/pricing.html" >Pricing</a>    
        <a href="/contact.html" >Contact Us</a>
        <input id="srchbar" type="search" placeholder="Search">
    </div>
</nav>

- blackRob4953

---

是的。请记住，当用户在您的导航中单击链接时，您的服务器/本地系统将发送链接指示的文件以供下载和显示。当他们点击“关于”，浏览器将载入about.html。因此，它应该包含相同的导航。 - Purag

如果您有服务器端语言，可以将此代码放入模板中并包含在所有页面中；否则，请使用AngularJS将其制作为指令。 - joyBlanks

我希望你能翻译这段话：“我也在寻找同样的东西。很遗憾，2017年我们无法通过基于客户端的网站实现这一点。微软从来没有放弃过母版页的概念（在当前版本中称为“_layouts”）。看起来，一个客户端的“容器页面”并不是荒唐的想法。” - Ron

Answer 1

这是帮助了我的方法。我的导航栏在标签中。整个导航栏的代码都在nav.html文件中（没有任何html或body标签，只有导航栏的代码）。在目标页面中，将以下内容放入标签中：

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

然后在body标签中，使用一个唯一的id创建一个容器，并使用javascript代码块将nav.html加载到容器中，如下所示：

接下来是需要翻译的内容：

<!--Navigation bar-->
<div id="nav-placeholder">

</div>

<script>
$(function(){
  $("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->

- Ramtin

---

如果您像您在答案中所做的那样硬编码jQuery版本：<script src="https://code.jquery.com/jquery-1.10.2.js"></script>，那么当1.10.3或1.11.0版本推出时，您的页面会发生什么？略微离题，不要介意我的无知。 - András Aszódi

@LaryxDecidua 然后它就可以继续工作了。总是加载最新版本可能会导致页面崩溃。考虑不同版本之间的重大更改可能会造成问题。因此，在切换到不同版本时建议进行测试。 - Markus Pscheidt

我在本地电脑的index.html中使用了上述代码，在Chrome中测试时，它给了我以下错误，并且无法加载nav.html。错误信息为：jquery.min.js:4 Access to XMLHttpRequest at 'nav.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 有任何想法吗？ - KenyKeny

@KenyKeny，你的nav.html代码从哪里提供服务？你可能需要在该服务上启用CORS权限（例如AWS API网关允许您启用CORS--如果使用AWS，请搜索如何执行此操作）。如果您只是在chrome中进行测试，则可能需要获取扩展程序。执行CORS时，会通过OPTION发出预检请求（类似于post或get，但是选项），它是一个虚假的请求，服务器使用特定标头来检查。如果服务器未配置为接受CO请求（默认情况下不应该），则需要对其进行配置，并在标头中指定此设置。 - PaulG

@KenyKeny，那个错误是因为你正在使用 file:/// 在本地提供文件，而 Chrome 不允许这样做。使用 Python 在 HTML 文档目录中启动一个简单的 HTTP 服务器，它应该可以无错误加载。输入 cd user/website/ 然后输入 python -m SimpleHTTPServer。 - Jon Behnken

Answer 2

我知道这是一个很老的问题，但是当你有JavaScript可用时，你可以使用jQuery及其AJAX方法。

首先，创建一个包含所有导航栏HTML内容的页面。

接下来，使用jQuery的$.get方法获取页面内容。例如，假设您将所有导航栏HTML放入名为navigation.html的文件中，并在index.html中添加了一个占位符标记（如<div id="nav-placeholder">），则可以使用以下代码：

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.get("navigation.html", function(data){
    $("#nav-placeholder").replaceWith(data);
});
</script>

- Jacques Marais

---

这个比 https://dev59.com/2lwZ5IYBdhLWcg3wBcMJ#42333464 更好，因为它实际上替换了占位符元素。 - Tamás Sengel

Answer 3

使用纯 JavaScript：

将导航栏的 HTML 代码保存在 nav.html 文件中。

创建一个名为 nav.js 的文件，并使用以下代码：

fetch('nav.html')
.then(res => res.text())
.then(text => {
    let oldelem = document.querySelector("script#replace_with_navbar");
    let newelem = document.createElement("div");
    newelem.innerHTML = text;
    oldelem.parentNode.replaceChild(newelem,oldelem);
})

在您想要添加导航栏的其他HTML文件中，请添加此行：

<script id="replace_with_navbar" src="nav.js"></script>

这将用nav.html的内容替换脚本本身。

- Mendi Barel

---

适用于静态项目，如果存在切换类或下拉菜单，则无法正常工作。有没有解决方案可以使其与下拉菜单、切换一起工作？ - Abu Nooh

我爱你 @Mendi Barel。这就是我一直在寻找的东西。它将我的JavaScript与HTML分离，并且可以与bootstrap一起使用。它甚至解决了我的下拉菜单无法工作的问题。谢谢！ - TheCodeGeek

使用 DOMParser 会比使用 .innerHTML 更好，你觉得呢？ - Paradox

@AbuNooh 看起来问题是由于 fetch() 需要一些时间才能运行，而下拉菜单的交互在 fetch() 完成运行之前就已经加载了。如果您检查控制台，您会看到它输出某种错误，可能是代码抱怨找不到元素。一个 hacky 的解决方案是为您的 Javascript 交互代码设置一个 setTimeout()，或者使用另一个 .then() 在 fetch() 运行后运行您的交互代码。 - Tyrcnex

Answer 4

你可以使用PHP制作多页网站。

• 创建一个header.php文件，其中应该放置所有菜单和社交媒体等的html代码。
• 使用以下代码将header.php插入到index.php中

<? php include 'header.php'; ?>

(上面的代码将在此之前转储所有HTML代码)您的网站正文内容。

• 同样，您可以轻松创建页脚和其他元素。 PHP内置支持其扩展中的HTML代码。因此，最好学习这种简单的修复方法。

- Sachin Kanungo

---

那么你们都在说我应该将所有这些内容转换为PHP，而不是为我的网站创建多个HTML页面？这是我的第一个网站，我知道HTML，所以我使用了它，但如果应该使用PHP，那就应该使用PHP...那么应该选择哪个呢？ - blackRob4953

这是非常基础的 PHP，你可以轻松学习。一旦你将你的网站转换为使用服务器端语言，你就不会遇到噩梦般的问题了。我强烈推荐这样做。但如果你只想使用 HTML，请考虑使用 .shtml 处理小问题，但对于不断发展的网站来说，我仍然觉得它很笨重。 - Sachin Kanungo

好的，现在这个页面是 HTML。我怎么将它转换为 PHP？是修改几个条目还是重新制作所有标签？如果是后者，怎么做……以免出错哈。 - blackRob4953

将扩展名更改为.php，然后你就完成了。使用以下代码括号输入php代码 <?php include 'header.php'; ?> 前往php.net或w3schools进行基础学习。 - Sachin Kanungo

Answer 5

Brando ZWZ提供了一些处理此情况的好方法。

关于在多个页面上使用相同的导航栏

Aug 21, 2018 10:13 AM|LINK

据我所知，有多种解决方案。

例如：

整个导航栏的代码都在nav.html文件中（没有任何html或body标签，只有导航栏的代码）。

然后我们可以直接从jQuery加载它，而无需编写大量代码。

像这样：

    <!--Navigation bar-->
    <div id="nav-placeholder">

    </div>

    <script>
    $(function(){
      $("#nav-placeholder").load("nav.html");
    });
    </script>
    <!--end of Navigation bar-->

方案2：

您可以使用JavaScript代码来生成整个导航栏。

如下所示：

Javascript 代码：

$(function () {
    var bar = '';
    bar += '<nav class="navbar navbar-default" role="navigation">';
    bar += '<div class="container-fluid">';
    bar += '<div>';
    bar += '<ul class="nav navbar-nav">';
    bar += '<li id="home"><a href="home.html">Home</a></li>';
    bar += '<li id="index"><a href="index.html">Index</a></li>';
    bar += '<li id="about"><a href="about.html">About</a></li>';
    bar += '</ul>';
    bar += '</div>';
    bar += '</div>';
    bar += '</nav>';

    $("#main-bar").html(bar);

    var id = getValueByName("id");
    $("#" + id).addClass("active");
});

function getValueByName(name) {
    var url = document.getElementById('nav-bar').getAttribute('src');
    var param = new Array();
    if (url.indexOf("?") != -1) {
        var source = url.split("?")[1];
        items = source.split("&");
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            var parameters = item.split("=");
            if (parameters[0] == "id") {
                return parameters[1];
            }
        }
    }
}

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div id="main-bar"></div>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <%--add this line to generate the nav bar--%>
    <script src="../assets/js/nav-bar.js?id=index" id="nav-bar"></script>
</body>
</html>

https://forums.asp.net/t/2145711.aspx?Same+navbar+on+multiple+pages

- user6848902

Answer 6

一个非常古老但足够简单的技术是使用"服务器端包含",将HTML页面包含到具有.shtml扩展名的顶层页面中。例如，这将是您的index.shtml文件:

<html>
<head>...</head>
<body>
<!-- repeated header: note that the #include is in a HTML comment -->
<!--#include file="header.html" -->
<!-- unique content here... -->
</body>
</html>

是的，这很糟糕，但它有效。记得在你的HTTP服务器配置中启用SSI支持（这是如何在Apache中实现的方法）。

- András Aszódi

Answer 7

在你的javascript文件中，你可以创建一个包含HTML代码的字符串元素，然后使用insertAdjacentHTML关键字将该变量插入到HTML的开头。

    var navbar = ` 
        <nav>
            <div>
                <a href="/">
                    <div id="logo">
                        <img src="image.png" alt="Home" />
                    </div>
                    <div>
                        <img src="image.png" alt="Home" />
                    </div>
                    <div id="tagline">
                        <img src="image.png" alt="Home" />
                    </div>
                </a>
            </div>
            <div>
                <a href="/" class="here">
                    Home
                </a>
                <a href="/about.html">About</a>
                <a href="/services.html">Services</a>
                <a href="/pricing.html">Pricing</a>
                <a href="/contact.html">Contact Us</a>
            </div>
        </nav>`;

        // inserting navbar in beginning of body
        document.body.insertAdjacentHTML("afterbegin", navbar);

最后，使用以下代码将Javascript文件链接到你的HTML中：

script src="script.js"></script>

- DivyashC

Answer 8

非常简单，不需要任何脚本。

在普通的（外部）html文件中编写您的html代码，并且在需要包含其内容的html文件中添加以下内容：

<embed type="text/html" src="my-menu.html">

- Gerard van der Stelt

---

不好的做法 - 钟智强

我害怕，为什么这是一种糟糕的方式？看起来代码非常简单... - Siva Prasad