HTML中link标签rel设为import废弃后怎么引入外部HTML组件-html教程-PHP中文网

fetch + innerhtml 是当前最常用替代方案，即用 fetch 加载同源 html 片段后插入 innerhtml，无需构建工具或服务端配置，但需 http(s) 服务支持，且 script 不自动执行、样式不继承、路径以主 html 为基准。

html中link标签rel设为import废弃后怎么引入外部html组件

fetch + innerHTML 是当前最常用替代方案

直接用 fetch 加载同源 HTML 片段，再塞进 innerHTML，是目前前端项目里最普遍的“伪引入”做法。它不依赖构建工具，也不需要服务端配置，但必须跑在 HTTP(S) 服务上——双击打开 file:// 会因 CORS 策略失败。

常见错误现象：net::ERR_FAILED 或控制台静默无响应，基本都是因为没起本地服务；fetch 成功但 <script></script> 标签没执行，这是浏览器默认行为，不是 bug。

只加载纯片段（如 <header>...</header>），不要带、、
路径以当前 HTML 文件为基准，比如 fetch("includes/header.html")，不是以 JS 文件位置为准
插入后若需运行脚本，得手动提取 <script></script> 内容并创建新节点执行（注意 CSP 限制）
样式不会自动继承，外部 CSS 要提前加载或内联到片段中

iframe 仍是唯一原生、零配置的嵌入方式

iframe 不是“过时方案”，而是唯一不需要 JavaScript 就能工作的原生机制。它适合嵌入独立功能模块（如用户协议页、第三方表单），但不适合复用导航栏这类要和主页面样式融合的组件。

容易踩的坑：iframe 默认宽高是 300×150px，内容常被截断；src 指向本地文件时，在 file:// 下会被现代浏览器拦截；跨域时即使 fetch 能拿到内容，iframe 渲染也可能空白。

务必设置 style="width:100%; height:200px; border:none;"，否则尺寸不可控
加 title 属性提升可访问性，比如 title="网站头部导航"
移动端要注意滚动穿透和焦点管理，尤其嵌套在 transform 容器里时坐标易偏移
想操作 iframe 内 DOM？得用 iframe.contentDocument，且仅限同源

别碰 HTML Imports 和 import './xxx.html'

<link rel="import"> 在 Chrome 73+ 已彻底移除，Firefox 和 Safari 从未支持。现在写这行代码等于没写——控制台不会报错，也不会加载任何东西，document.querySelector('link[rel="import"]').import 返回 null。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

import html from './header.html?raw' 这类写法属于 Webpack/Vite 的构建时行为，不是浏览器标准。它把 HTML 当字符串注入，文件变更必须重新构建才生效，无法用于 CMS 动态编辑或用户上传场景。

Chrome 控制台若出现 HTML imports are no longer supported，说明你还在用已废弃 API
import('./header.html') 是动态导入 ES 模块语法，只认 JS 文件，对 HTML 报 404 或解析错误
所谓“引入 HTML”，本质是拼接时机的选择：你要的是开发期便利，还是上线后稳定？两者不可兼得

真正可靠的引入只发生在服务端或构建时

如果项目允许服务端渲染或使用构建工具，就别在浏览器里硬扛“运行时引入”。SSI、PHP include、Nginx include，或者 Vite 的 vite-plugin-html、Webpack 的 html-webpack-plugin，都能在发给浏览器前就把多个 HTML 文件合并成一个完整文档。

这种方式规避了所有客户端运行时问题：无跨域、无 script 不执行、无路径解析混乱、无双滚动条。但它要求部署环境支持对应能力，不适合纯静态托管（如 GitHub Pages 默认不启 SSI）。