如何通过index.html引入外部HTML文件实现内容调用？

本文共计893个文字，预计阅读时间需要4分钟。

为了简化伪原创，以下是对原文的

原文：

为什么不能用 <link rel="import">

这个 API 已被 Chrome 73 起彻底移除，Firefox 和 Safari 从未支持。现在写 <link rel="import" href="header.html"> 不会触发任何加载，document.currentScript.ownerDocument 也拿不到内容。别在新项目里碰它，连兼容性兜底都不用做。

fetch 加载 HTML 片段的实操要点

这是目前静态站点最可行的纯前端方案，但有几个硬约束必须满足：

• 目标 HTML 文件（如 header.html）必须与 index.html 同源，或服务端显式返回 Access-Control-Allow-Origin: *
• 不能双击打开 index.html —— 必须通过 http://localhost:xxx 或线上域名访问，否则浏览器直接拦截请求
• innerHTML 插入后，原片段里的 <script> 标签不会执行，如果真有内联脚本，得手动提取并 eval 或创建 <script> 元素追加（不推荐）
• 建议插入前清空容器：document.getElementById('header-container').innerHTML = ''，避免重复调用时堆叠内容

最小可用示例：

立即学习“前端免费学习笔记（深入）”；

fetch('header.html') .then(r => r.ok ? r.text() : Promise.reject(new Error(r.status))) .then(html => document.getElementById('header-container').innerHTML = html) .catch(err => console.error('加载 header.html 失败:', err));

<iframe> 的适用边界在哪

它不是“引入”，而是“嵌套一个独立文档”。这意味着：

• 样式完全隔离：父页 CSS 不影响 iframe 内容，反之亦然
• 脚本环境分离：iframe 里的 JS 无法直接访问父页 window，需用 postMessage 通信
• 滚动条可能叠加：如果 iframe 内容超长且父页也滚动，会出现两套滚动条，scrolling="no" 在现代浏览器中已无效，得靠 CSS overflow: hidden 控制
• SEO 友好性差：搜索引擎通常不把 iframe 内容计入主页面权重

适合场景：嵌入第三方小工具（如天气插件）、隔离风险内容（如用户提交的 HTML）、或明确需要沙箱化渲染的模块。

构建工具里别 runtime 拼 HTML

如果你用 Vite 或 Webpack，就该在构建期处理模板合并，而不是等页面加载后再 fetch。比如 Vite 配合 vite-plugin-html，可直接在 index.html 里写：

<div id="nav"><%= require('./nav.html') %></div>

这样做的好处是：HTML 被提前合并、支持变量注入、能压缩、无首屏闪动、也不依赖运行时网络请求。唯一代价是开发时改了 nav.html 得重新构建——但热更新基本能覆盖。

真正容易被忽略的是协议限制：所有基于 fetch 或 XMLHttpRequest 的方案，都卡死在 file:// 协议上。哪怕只是本地测试，也得开个最小服务器（VS Code Live Server、python -m http.server），否则连控制台报什么错都看不到。