如何使用原生JavaScript为所有网页统一插入header和footer

第一步：抽离公共模块代码 #

把你写好的header、footer代码单独存为两个独立文件，比如header.html和footer.html，文件内仅保留模块本身的代码，不需要额外加整页的<html>、<body>等外层标签。
示例header.html内容：

<header>
  <nav>
    <a href="/index.html">首页</a>
    <a href="/about.html">关于</a>
    <a href="/contact.html">联系</a>
  </nav>
</header>

footer.html同理，仅存放footer相关代码即可。

第二步：编写通用加载逻辑 #

创建一个公共JS文件比如common.js，所有页面都引入这个文件，在里面封装加载公共模块的函数：

// 封装公共组件加载函数
async function loadComponent(selector, filePath) {
  try {
    const res = await fetch(filePath);
    if (!res.ok) throw new Error('组件加载失败');
    const htmlContent = await res.text();
    document.querySelector(selector).innerHTML = htmlContent;
  } catch (err) {
    console.error(err);
  }
}

// DOM加载完成后自动挂载公共模块
document.addEventListener('DOMContentLoaded', () => {
  loadComponent('#header-wrap', '/header.html');
  loadComponent('#footer-wrap', '/footer.html');
});

第三步：页面预留挂载位置 #

在about、contact等所有需要复用模块的页面中，对应位置留空的挂载容器，同时引入公共JS即可：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>关于我们</title>
</head>
<body>
  <!-- 头部挂载容器 -->
  <div id="header-wrap"></div>
  
  <!-- 当前页面独有内容 -->
  <main>
    <h1>关于我们</h1>
    <p>页面专属内容</p>
  </main>
  
  <!-- 底部挂载容器 -->
  <div id="footer-wrap"></div>

  <!-- 引入公共JS -->
  <script src="/common.js"></script>
</body>
</html>

补充说明 #

• 本地直接打开HTML文件测试时，fetch会触发跨域报错，建议用本地服务启动项目，比如VS Code的Live Server插件
• 如果你是小型项目不想额外新建HTML文件，也可以把header、footer的HTML字符串直接写在common.js里，直接赋值给容器innerHTML，省去网络请求步骤：

const headerStr = `
<header>
  <nav>
    <a href="/index.html">首页</a>
    <a href="/about.html">关于</a>
    <a href="/contact.html">联系</a>
  </nav>
</header>
`
const footerStr = `
<footer>
  <p>© 2024 版权所有</p>
</footer>
`
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#header-wrap').innerHTML = headerStr;
  document.querySelector('#footer-wrap').innerHTML = footerStr;
})

内容的提问来源于stack exchange，提问作者Ikram Ul Haq