如何用index.html复用所有HTML页面的head标签以避免代码冗余

如果你不想在每个HTML页面重复写Bootstrap CDN、app.js这类公共头部资源，可以用以下纯JavaScript方案实现，让其他页面自动加载index.html的公共头部内容，再加载自身头部：

方案一：通过Fetch API动态加载index.html的公共头部 #

这是纯前端最直接的实现方式，核心思路是用JS请求index.html，提取其中的head内容，插入到当前页面的head中。

步骤1：整理index.html的公共head #

确保index.html的head里包含所有需要共享的资源：

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 所有页面共享的资源 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <!-- index页面内容 -->
</body>
</html>

步骤2：编写加载公共头部的脚本 #

创建load-common-head.js，负责获取并插入公共头部：

// load-common-head.js
fetch('index.html')
  .then(res => res.text())
  .then(html => {
    // 解析index.html的DOM结构
    const parser = new DOMParser();
    const indexDoc = parser.parseFromString(html, 'text/html');
    const commonHeadElements = indexDoc.head.children;
    
    // 获取当前页面的head，批量插入公共元素
    const currentHead = document.head;
    Array.from(commonHeadElements).forEach(el => {
      currentHead.appendChild(el.cloneNode(true));
    });

    // 触发自定义事件，通知页面公共头部已加载完成
    document.dispatchEvent(new CustomEvent('commonHeadLoaded'));
  })
  .catch(err => console.error('加载公共头部失败:', err));

步骤3：在其他页面引入脚本 #

在其他页面的head中先引入这个脚本，再添加自身的头部内容：

<!-- about.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 先加载公共头部脚本 -->
  <script src="load-common-head.js"></script>
  
  <!-- 页面自身的头部内容 -->
  <title>关于我们</title>
  <link rel="stylesheet" href="about.css">
</head>
<body>
  <!-- about页面内容 -->
  <script>
    // 依赖公共资源的代码，需等待公共头部加载完成后执行
    document.addEventListener('commonHeadLoaded', () => {
      // 这里写需要Bootstrap或app.js支持的代码
      console.log('公共资源已加载，可以执行依赖代码');
    });
  </script>
</body>
</html>

方案二：使用客户端模板引擎（可选） #

如果项目可以引入轻量模板引擎（如Handlebars），可以把公共头部抽成单独的模板文件，更便于维护：

步骤1：创建公共头部模板 #

新建common-head.html，仅保留公共资源：

<!-- common-head.html -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="app.js"></script>

步骤2：在页面中加载模板 #

在其他页面的head中引入Handlebars并加载模板：

<!-- contact.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <script src="https://cdn.jsdelivr.net/npm/handlebars@4.7.7/dist/handlebars.min.js"></script>
  <script>
    fetch('common-head.html')
      .then(res => res.text())
      .then(template => {
        document.head.insertAdjacentHTML('afterbegin', template);
        document.dispatchEvent(new CustomEvent('commonHeadLoaded'));
      });
  </script>
  
  <!-- 自身头部内容 -->
  <title>联系我们</title>
  <link rel="stylesheet" href="contact.css">
</head>
<body>
  <!-- contact页面内容 -->
</body>
</html>

注意事项 #

• 异步加载顺序：公共头部是异步加载的，页面自身依赖公共资源的代码必须等待commonHeadLoaded事件触发后再执行，避免报错。
• 资源重复加载：如果index.html和其他页面有重复的meta标签（如charset），可以在模板中只保留唯一需要共享的资源，避免冗余。
• 服务器支持：如果使用Fetch API加载本地文件，需要在本地服务器环境下运行（如用live-server），直接打开本地HTML文件会触发跨域限制。

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