最推荐构建阶段处理，如用11ty将header抽为_includes/header.njk并用{% include 'header.njk' %}注入生成纯静态HTML；若只能客户端方案，需DOMContentLoaded后fetch加载并手动初始化交互，注意资源路径和CSP限制。
直接用 fetch 动态加载 header.html 是最轻量、无需后端配合的方案，但必须处理好加载失败、样式隔离和 SEO 折损这三件事。
为什么不能只靠 include 或 iframe？
原生 HTML 没有 include 语法；iframe 虽能复用文件，但会带来三个硬伤：头部样式无法继承主页面 CSS、document.title 和 meta 不生效、搜索引擎几乎不索引 iframe 内容。实际项目里，SEO 敏感或需统一导航高亮的后台系统基本不用它。
fetch 加载 header.html 的最小可行写法
关键不是“能不能加载”，而是“加载失败时页面是否可用”。下面这段代码跑通率高，且留了降级出口：
function loadHeader() {
const headerEl = document.getElementById('header');
if (!headerEl) return;
fetch('header.html')
.then(r => {
if (!r.ok) throw new Error(`HTTP ${r.status}`);
return r.text();
})
.then(html => {
headerEl.innerHTML = html;
// 加载完再触发一次 resize 或 init，避免 JS 绑定丢失
dispatchEvent(new Event('header-loaded'));
})
.catch(err => {
console.warn('header load failed:', err);
headerEl.innerHTML = '<nav><ul><li><a href="/">首页</a></li></ul></nav>';
});
}
document.addEventListener('DOMContentLoaded', loadHeader);
- 必须检查
r.ok，否则 404 也会进then分支 -
dispatchEvent是留给后续模块（比如菜单高亮逻辑）的钩子，不写也行，但写了就别忘了监听 - 降级 HTML 写成纯字符串而非 DOM 操作，避免解析失败导致白屏
样式和脚本作用域冲突怎么破？
公共头部常带自己的 <style> 和 <script>，直接 innerHTML 插入会导致：
立即学习“前端免费学习笔记（深入）”；
- CSS 类名污染主页面（比如
.btn被覆盖） -
<script>执行两次（如果主页面也引入同名 JS） - 相对路径资源（如
./logo.png）在子文件里解析失败
解决办法只有两个：
- 头部文件里所有 CSS 加前缀，例如用
header-xxx类名，或套一层<div class="header-wrapper">后用 CSS Scoped -
header.html里不要放<script>，把逻辑抽到独立 JS 文件（如header.js），主页面统一加载一次 - 图片等资源路径统一用绝对路径，比如
/static/img/logo.png，避免相对路径歧义
Spring Boot 静态托管下要注意的坑
如果你把 header.html 放在 src/main/resources/static/ 下，访问路径是 /header.html，但要注意：
- Spring Security 默认会拦截所有请求，包括
header.html—— 必须在配置里放行：permitAll().requestMatchers("/header.html", "/footer.html") - 如果用了 Thymeleaf 模板引擎，
header.html不能含th:*标签，否则会被当成模板解析失败，返回 500 - 开发时用 IDE 内置服务器（如 Spring Boot DevTools）没问题，但部署到 Nginx 时，要确认
header.html确实被复制到了最终static/目录下
真正麻烦的不是怎么合并，而是合并后谁负责维护样式边界、谁管脚本执行时机、谁兜底加载失败——这些事没约定清楚，三个月后你就会在凌晨两点 debug 一个莫名消失的面包屑导航。
