iframe最直接但需防跨域和语义问题；fetch+innerHTML适合同源静态内容；服务端include可绕过前端限制；Web Components适合复用隔离模块。
iframe 是最直接的嵌套方式，但得小心跨域和语义问题
用 iframe 把一个 HTML 页面嵌进另一个页面，是浏览器原生支持、零依赖的做法。但它不是“把内容融进去”，而是“开个窗口看另一个页面”——这意味着样式隔离、脚本不互通、SEO 不友好，且一旦目标页开启 X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none'，就会白屏或报错 Refused to display 'xxx' in a frame。
- 只适合嵌入你完全可控的同域页面，或明确允许被嵌入的第三方服务（比如某些地图、表单 SDK）
-
src必须是完整 URL（http://或https://），相对路径在跨域场景下容易失效 - 加
loading="lazy"可延迟加载，避免阻塞主页面渲染；设sandbox属性能限制 iframe 内脚本权限（如sandbox="allow-scripts allow-same-origin"） - 移动端需加
width="100%" height="500"并配合 CSSiframe { min-height: 500px; }防止高度塌陷
fetch + innerHTML 适合同源静态内容注入
如果两个 HTML 文件部署在同一域名下（比如都在 /pages/ 下），可以用 fetch 拿到目标 HTML 字符串，再用 element.innerHTML = responseText 插入。这种方式内容真正“融合”进当前 DOM，样式和事件可统一管理。
- 必须同源，否则触发 CORS 错误
Blocked by CORS policy - 返回的 HTML 片段里如果有
<script></script>标签，默认不会执行；要执行就得手动eval或创建新script元素——但有安全风险，不推荐 - 注意目标 HTML 中的相对路径（如
./img/logo.png）会以当前页面为基准解析，可能 404；建议改用绝对路径或统一 base URL - 简单示例：
fetch('/widget.html')<br> .then(r => r.text())<br> .then(html => document.getElementById('target').innerHTML = html);
服务端 include（如 SSI、PHP include）绕过前端限制
如果你能控制服务器，让嵌套在服务端完成，就彻底避开跨域、CORS、JS 执行时机等前端麻烦事。Nginx 支持 SSI（Server Side Includes），Apache 默认支持，PHP/Node.js 模板引擎也都有类似机制。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- Nginx 需开启
ssi on;，然后在主 HTML 里写<!--# include file="/header.html" --> - PHP 直接
include 'footer.html';，但注意被 include 的文件不能含、等重复结构 - 关键点：所有路径都是服务器文件系统路径，不是 URL；且被包含文件不经过浏览器解析，不存在“加载失败”一说
- 缺点是无法动态传参、不支持客户端条件判断，纯静态拼接
Web Components（custom element）适合复用且隔离的 UI 块
如果你要嵌套的是一个功能明确、样式自洽、可能多次使用的模块（比如通知栏、用户卡片），封装成自定义元素比硬塞 HTML 更可持续。
立即学习“前端免费学习笔记（深入）”；
- 用
customElements.define()注册，HTML 里直接写<user-card user-id="123"></user-card> - Shadow DOM 天然隔离样式和事件，不怕外部 CSS 泄露或冲突
- 需要手动处理属性变更响应（
observedAttributes）、异步加载内容（如 fetch 用户数据） - 兼容性没问题：Chrome 33+、Firefox 63+、Safari 10.1+、Edge 79+；老版本需
@webcomponents/webcomponentsjspolyfill
实际选哪种，取决于你能不能改服务器、两个页面是否同源、嵌入内容是否需要交互、以及后续要不要维护。最容易踩坑的是以为 fetch + innerHTML 能执行脚本，或者没检查目标页的 X-Frame-Options 就硬上 iframe。
