如何引入外部HTML文件 实现head等公共代码的多页面复用

以下方案均可替代原PHP include 能力，支持公共代码统一管理、一处修改全量生效：

1. 原生JS Fetch动态加载方案 #

该方案无任何第三方依赖，支持向<head>、<body>任意位置插入公共内容，完全解决<object>标签无法插入头部的问题：

步骤1：封装公共加载函数 #

在公共JS文件中加入以下代码：

async function loadComponent(componentPath, targetSelector) {
  try {
    const res = await fetch(componentPath);
    if (!res.ok) throw new Error(`组件加载失败: ${componentPath}`);
    const content = await res.text();
    // 插入到目标节点
    const target = document.querySelector(targetSelector);
    target.innerHTML += content;
    // 可选：执行插入内容中的script标签
    target.querySelectorAll('script').forEach(oldScript => {
      const newScript = document.createElement('script');
      [...oldScript.attributes].forEach(attr => newScript.setAttribute(attr.name, attr.value));
      newScript.textContent = oldScript.textContent;
      oldScript.replaceWith(newScript);
    });
  } catch (err) {
    console.error(err);
  }
}

步骤2：页面调用 #

在需要引入公共代码的页面加入调用逻辑即可：

// 引入头部公共资源（meta、link、公共脚本等）
loadComponent('/common/head-part.html', 'head');
// 引入公共导航栏
loadComponent('/common/header.html', '.header-wrap');
// 引入公共页脚
loadComponent('/common/footer.html', '.footer-wrap');

2. 服务端包含（SSI）方案 #

如果你的部署服务器支持SSI特性，无需写JS即可实现服务端渲染阶段的代码拼接，效果和PHP include完全一致：

• 将页面后缀修改为.shtml
• 在需要插入公共代码的位置添加指令：

  <!--#include virtual="a_document.html" -->
  

• 服务器返回页面时会自动将指令替换为对应文件的内容，用户端无感知，性能优于前端动态加载。

3. 构建工具预编译方案 #

如果项目使用前端构建工具打包，可在构建阶段直接完成公共代码的注入，不需要服务端支持也不需要前端动态加载，性能最优：

• Vite项目：安装vite-plugin-html-include插件后，直接在HTML中写<!--#include file="./common/header.html" -->即可
• Webpack项目：配置html-loader后支持直接引入HTML片段
• 静态站点生成器（Eleventy、Hexo等）：原生支持组件化复用公共代码，构建时自动注入到所有关联页面

补充说明：你提到的HTML原生include实际是已废弃的HTML Imports标准，2020年已从Web标准中移除，不建议使用；<object>标签设计用途是嵌入多媒体资源，不适合用于HTML片段引入，会存在作用域隔离、位置限制等问题。

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