必须启动本地http服务（如npx serve或python -m http.server 8000），因file://协议下fetch加载header.html会因跨域限制失败；访问http://localhost:8000方可正常运行。
直接用 fetch 加载 header.html 和 footer.html 最省事，但必须配 server 本地跑
浏览器直接双击打开 index.html 会触发跨域限制，fetch('header.html') 直接失败，控制台报 net::ERR_FILE_NOT_FOUND 或 CORS policy 错误。这不是代码写错了，是协议限制——file:// 协议下无法发起跨文件请求。
解决办法只有一个：启动一个最小 HTTP 服务。不需要 Apache、Nginx，用 Node 自带的 npx serve 或 Python 的 python -m http.server 8000 就行。确保所有 HTML 文件在同一个目录下（比如 header.html、footer.html、index.html 都在根目录），然后访问 http://localhost:8000 就能正常加载。
-
fetch返回的是纯文本，要用insertAdjacentHTML('beforeend', html)插入，别用innerHTML =—— 否则内联脚本（比如header.html里的onclick）会被丢弃 - 插入点容器必须存在且有明确 ID，比如
<div id="header"></div>，不能只靠 class 名，document.querySelector('.header')在 DOM 尚未就绪时可能返回null - 多个
fetch并发请求时，建议用Promise.all([fetch(...), fetch(...)])控制顺序，避免 footer 先于 header 渲染导致样式错位
iframe 嵌入最简单，但高度固定、样式隔离、SEO 友好度差
iframe 不依赖 JS、不跨域、开箱即用，但它把 header.html 和 footer.html 放进独立上下文，父页面 CSS 对它完全无效，必须在 header.html 里重复引入 main.css，否则样式全丢。
更麻烦的是高度：设 height="120px" 看似可行，但字体缩放、响应式断点一变，顶部导航栏就截断或留白。用 height="auto" 不生效，iframe 本身不支持自动撑高。
- 如果非要动态适配高度，得在
header.html里加一段 JS，通过window.parent.postMessage把自身document.body.scrollHeight发给父页，再由父页调整iframe.style.height—— 多一层通信，反而比fetch更重 -
iframe内容不会被搜索引擎爬取为当前页的一部分，对 SEO 不利；且移动端双指缩放时，iframe区域常卡住不动 - 链接跳转默认在
iframe内发生，需加target="_parent"才能跳出，否则用户点导航会困在小框里
构建时预编译（Vite / Webpack）才是真正“静态”的解法
如果你项目里已有 vite 或 webpack，别碰运行时加载。用插件在构建阶段就把 header.html 内容原样注入到每个 HTML 页面中，生成的最终文件就是完整 HTML，零 JS 依赖、零跨域、零请求延迟。
Vite 用户装 vite-plugin-html，在 vite.config.js 里写：
import { createHtmlPlugin } from 'vite-plugin-html'
export default defineConfig({
plugins: [
createHtmlPlugin({
inject: {
data: {
header: fs.readFileSync('src/includes/header.html', 'utf-8'),
footer: fs.readFileSync('src/includes/footer.html', 'utf-8')
}
}
})
]
})
然后在 index.html 里用 和 占位 —— 构建后这些标记就被替换成真实 HTML 片段。
- 注意
header.html必须是纯片段，不要含、标签，否则会嵌套出错 - 路径必须相对于
vite.config.js，不是相对于 HTML 文件；读取失败时构建会中断，比运行时报错更容易定位 - 这种方式下，
header.html里的相对路径（如img/logo.png）仍按原 HTML 的位置解析，不用改路径
本地开发用 serve，上线用构建预编译，别混用
很多人试图让一套代码既能在 file:// 下双击运行，又能部署后无缝工作，结果在 fetch 失败和 iframe 错位之间反复横跳。根本矛盾在于：纯静态托管（GitHub Pages、Netlify、Vercel）不支持 SSI，也不允许本地文件协议运行 JS 加载同域文件。
真正可靠的分层方案是：开发时用 npx serve 跑 fetch，保证实时调试；上线前用 Vite 构建，把公共部分硬编码进每个 HTML —— 这样生产环境不依赖任何 JS，连广告拦截插件都拦不住你的页眉。
最容易被忽略的一点：header.html 里如果有内联事件（onclick="toggleMenu()"），而 toggleMenu 定义在主页面 JS 中，预编译后函数依然可调；但用 fetch 动态插入时，该函数必须已声明（脚本放在 底部或用 defer），否则执行时报 ReferenceError。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
