link rel="import" 已被所有主流浏览器彻底移除，Chrome 73起不再支持，Firefox、Safari、Edge从未实现，控制台报错且不加载；其根本问题在于规范删除、引擎下线，且存在全局污染、无模块作用域、无法与构建工具集成等缺陷。
link rel="import" 已被所有主流浏览器彻底移除，Chrome 73 起就不再支持，Firefox、Safari、Edge 从未实现。你现在在 index.html 里写这行代码，控制台会直接报错：HTML imports are no longer supported，且什么都不会加载。
为什么不能继续用 link rel="import"
它不是“暂时不推荐”，而是规范已删除、引擎已下线。关键问题不止是兼容性：
-
link rel="import"共享全局作用域，child.html里的<script>var foo = 1</script>会污染index.html的window，无法隔离 - 没有模块作用域，无法做
export/import级别的依赖管理 - 无法与构建工具（Vite/Webpack）集成，热更新、tree-shaking 全失效
- 跨域、缓存、错误处理都得手动补全，没标准语义
fetch() + innerHTML 是最轻量的替代方案
适合静态片段（如 header、footer），无需复杂逻辑，也不引入框架。
- 必须跑在 HTTP(S) 环境下（
file://协议会触发 CORS） - 用
await fetch('header.html').then(r => r.text())获取字符串，再塞进容器：document.getElementById('header').innerHTML = htmlStr - 注意：
header.html里不能有顶层<script></script>标签——它们不会执行；如需脚本，得用eval()或动态createElement('script')注入（不推荐） - 如果片段含内联样式，建议用
<style>包裹并加scoped属性，或改用 CSS-in-JS 方式注入
ES 模块 + 模板字符串才是现代 index.html 的模块化正解
把 HTML 片段写成 JS 模块，用 export 返回字符串或 DocumentFragment，再在 index.html 里 import 调用。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 示例：
header.js写export const headerTemplate = () => `<header><h1>My Site</h1></header>`; -
index.html中：<script type="module"> import { headerTemplate } from './header.js'; document.body.insertAdjacentHTML('afterbegin', headerTemplate()); </script> - 好处：作用域隔离、可复用、可单元测试、支持 TypeScript 类型推导
- 缺点：HTML 字符串里写复杂结构易出错，建议搭配模板函数（如
html`<div>${name}</div>`）或预编译工具
iframe 不是模块化，但某些场景下最省事
如果你只是想“嵌入一个独立页面”，且不关心 DOM 通信、样式穿透、SEO，iframe 仍是唯一零配置方案。
-
<iframe src="nav.html" seamless loading="lazy"></iframe>—— 注意seamless属性已被废弃，样式隔离靠 sandbox 和 CSS 重置 - 父子通信必须用
postMessage()，无法直接操作对方 DOM - 搜索引擎通常不索引
iframe内容，对 SEO 不友好 - 首屏渲染阻塞严重，尤其
nav.html加载慢时，整个布局会留白
真正难的不是“怎么把 HTML 拆出去”，而是“拆出去之后，状态、样式、生命周期怎么管”。多数人卡在第一步就停了，结果用 fetch 硬塞，后面遇到事件绑定失效、重复初始化、CSS 冲突才回头补救——这些其实都在模块设计阶段就该定死。
