如何在所有HTML页面中无刷新加载独立导航栏页面？

嘿，想要在所有页面复用同一个导航栏还不用刷新页面，这有几个实用的方案，你可以根据自己的项目情况来选：

方案1：用jQuery的.load()方法（适合已引入jQuery的Bootstrap项目） #

首先把你的导航栏代码单独存成一个独立的HTML文件，比如叫navbar.html，内容就是你那段导航栏（补全缺失的部分）：

<nav class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- 补全你的导航栏标题、链接等内容 -->
    </div>
    <!-- 补全折叠菜单的内容 -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <!-- 导航链接、下拉菜单等 -->
    </div>
  </div>
</nav>

然后在每个需要加载导航栏的页面里，先确保已经引入了jQuery和Bootstrap的JS（毕竟你的导航栏用了Bootstrap的折叠功能），接着在页面预留一个容器：

<div id="navbar-container"></div>

最后添加这段脚本：

$(document).ready(function() {
  $('#navbar-container').load('navbar.html', function() {
    // 动态加载后重新绑定Bootstrap折叠事件，确保功能正常
    $('.navbar-toggle').on('click', function() {
      $('#bs-example-navbar-collapse-1').toggleClass('in');
    });
  });
});

这个方法简单快捷，适合小项目或者已经在用jQuery的场景。

方案2：原生JavaScript Fetch API（无依赖，更轻量） #

如果不想依赖jQuery，用原生JS的Fetch API也能实现，步骤类似：

1. 同样把导航栏存成navbar.html
2. 在目标页面添加容器：<div id="navbar-container"></div>
3. 添加这段脚本：

document.addEventListener('DOMContentLoaded', function() {
  fetch('navbar.html')
    .then(response => response.text())
    .then(html => {
      document.getElementById('navbar-container').innerHTML = html;
      // 手动绑定折叠事件，解决动态加载后的功能失效问题
      const toggleBtn = document.querySelector('.navbar-toggle');
      const collapseMenu = document.querySelector('#bs-example-navbar-collapse-1');
      toggleBtn.addEventListener('click', () => collapseMenu.classList.toggle('in'));
    })
    .catch(error => console.error('加载导航栏失败:', error));
});

这个方法不需要额外库，适合追求轻量的项目。

方案3：服务器端包含（SSI，适合有服务器权限的场景） #

如果你的服务器支持SSI（比如Apache、Nginx），可以直接在服务器层面把导航栏插入页面，不需要前端JS，页面加载时就已经包含导航栏，体验和SEO都更好：

• Apache服务器：确保开启了SSI模块（一般默认开启），页面后缀改成.shtml（或在配置里让.html支持SSI），然后在需要导航栏的位置添加：

<!--#include virtual="/navbar.html" -->

• Nginx服务器：在server配置块里添加ssi on;，然后同样在页面里用上面的include指令即可。

方案4：使用模板引擎（适合中大型项目） #

如果你的项目用了前端构建工具（比如Webpack）或者服务器端渲染（比如Node.js + EJS/Handlebars），可以用模板引擎的“部分引用”功能复用导航栏：
比如用EJS的话，把导航栏存成navbar.ejs，然后在每个页面需要导航栏的位置写：

<%- include('navbar.ejs') %>

构建工具或服务器会在编译/渲染时自动把导航栏内容合并到页面里，最终输出的HTML已经包含导航栏，无需客户端动态加载。

方案选择参考 #

• 小项目、已用jQuery：选方案1
• 小项目、不想依赖jQuery：选方案2
• 有服务器权限、追求性能和SEO：选方案3
• 中大型项目、用了构建工具/模板引擎：选方案4

内容的提问来源于stack exchange，提问作者omar asi