如何在HTML中复用navbar代码 无需逐行复制即可在多页面加载导航栏

现有代码的问题 #

你尝试的脚本实现方式不正确：

• innerHTML赋值要求传入字符串格式的内容，直接写入未包裹的HTML标签会触发JavaScript语法报错
• 你现在的写法每个页面都要写完整的导航栏HTML内容，依然没有解决代码复用、避免重复复制的需求
• 原有导航栏代码里a标签重复声明了两次class属性，第二个属性会失效，需要合并为class="smoothScroll dropdown"

可行实现方案 #

方案1：原生JavaScript抽离复用（客户端实现，无服务端/构建工具依赖） #

把导航栏逻辑抽离为独立的JS文件，所有页面引入该文件即可，无需重复写导航栏代码：

1. 新建navbar.js文件，内容如下：

const navbarContent = `
<div class="dropdown">
  <a href="#header" class="smoothScroll dropdown">Company</a>
  <div class="dropdown-content">
    <a href="index.html#about">About Us</a>
    <a href="site-pictures.html">Portfolio</a>
    <a href="team.html">Leadership Team</a>
  </div>
</div>
`
document.addEventListener('DOMContentLoaded', () => {
  const target = document.getElementById('navbar-wrap')
  target && (target.innerHTML = navbarContent)
})

2. 所有需要插入导航栏的页面，只需要在对应位置写如下两行代码即可：

<div id="navbar-wrap"></div>
<script src="./navbar.js"></script>

后续修改导航栏只需要修改navbar.js一份文件，所有页面都会同步更新。

方案2：iframe引入 #

把导航栏单独存为navbar.html文件，所有页面用iframe标签引入：

<iframe src="./navbar.html" frameborder="0" width="100%" height="你导航栏的实际高度"></iframe>

该方案适合极简单的静态站点，缺点是存在样式、交互隔离，锚点跳转可能出现兼容问题。

方案3：服务端/构建工具实现 #

如果你的站点部署环境支持SSI（服务端包含），可以直接使用服务端注入语法，服务端会在返回页面前自动把导航栏内容嵌入页面：

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

如果使用静态站点生成工具或者前端构建工具，都内置了组件复用能力，编译阶段会自动把导航栏代码插入到所有引用的页面，和手动写HTML的加载效果一致，没有客户端脚本的渲染延迟。

纯HTML能否实现需求？ #

原生HTML没有提供原生的组件复用语法，无法仅依靠纯HTML实现免复制的导航栏复用效果，必须配合JavaScript、服务端能力或者构建工具实现。

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