如何在我的网站的每个页面上重用和 html 导航栏？答案

【问题标题】：How can I reuse and html navbar on each page of my website?如何在我的网站的每个页面上重用和 html 导航栏？
【发布时间】：2019-05-10 16:35:18
【问题描述】：

我正在为我的网站使用 Bootstrap 4。

每个页面都包含相同的导航栏代码。当我更改导航栏时，我必须将代码复制到每个页面。

如何使用导航栏代码创建一个文件并在运行时将其包含在每个页面中，从而可以更新一次导航栏并使其在每个页面上显示相同？

我知道如何在 php 中执行此操作，但我更喜欢使用 javascript。

我使用在其他网站上找到的示例创建了一个测试页面，但它不起作用，请参阅http://vidalingua.com/nav-test.html

【问题讨论】：

看看api.jquery.com/load

标签： jquery html bootstrap-4 navbar

【解决方案1】：

在您的网站上，您在头部加载 jquery，然后在页面底部加载 jquery slim。在 jquery 中，不支持 slim load()。而不是加载 2 个版本的 jquery lust 加载完整版本的 jquery 在你的脚部分，然后放置你的 jquery 代码。以下是您的页面的外观：

<!DOCTYPE html>
<html lang="en">
<head>

</head>

<body>

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

</div>


<!--end of Navigation bar-->


<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
$(function(){
  $("#nav-placeholder").load("navbar.html");
});
</script>
</body>

【讨论】：

谢谢史蒂夫！我将您的代码复制到vidalingua.com/nav-test2.html，但它不起作用。知道为什么吗？
我的错是 crossorgin 完整性编码错误，将链接到 jquery 的脚本代码替换为以下内容：<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>，它应该可以工作。我也会编辑答案。
嘿史蒂夫，我通过将下面的行替换为 jquery 包含来让您的代码正常工作。
史蒂夫，你的更新也很有效。我已经把它留在vidalingua.com/nav-test2.html 谢谢！
这种技术有一个问题，那就是谷歌页面抓取。如果以这种方式包含导航栏，Google 和其他机器人将找不到其他页面。有人有解决方法吗？

【解决方案2】：

我找到了一个可行的解决方案。

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(function(){
        var filename = "https://www.vidalingua.com/navbar.html"
        $("#includedContent").load(filename);
    });
</script>
</head>
<body>
<div id="includedContent"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

【讨论】：