HTML结构在微前端架构下的按需加载与样式快照隔离技术-html教程-PHP中文网

HTML Entry模式下子应用按需加载需用DOMParser解析HTML字符串，重写script/src、style/link路径，内联脚本交沙箱执行，动态样式需快照隔离，禁用document.head直接注入。

html结构在微前端架构下的按需加载与样式快照隔离技术

不是把 HTML 字符串 fetch 过来就完事了——关键在“解析后分发”，否则 script 404、样式漏载、内联脚本逃逸全是常态。

必须用 DOMParser 解析返回的 HTML 字符串，不能直接 innerHTML = htmlStr；否则 <script src="./main.js"></script> 中的相对路径会以主应用 URL 为基准解析，大概率 404
提取出的 scripts 列表要区分内联与外链：外链需补全为绝对 URL（靠 new URL(scriptSrc, response.url)），内联脚本必须交由沙箱执行（如 qiankun 的 execScripts），否则直接污染 window
styles 同样要重写和内容，避免 CSS 中的 url(./icon.png) 路径失效；建议子应用构建时设 publicPath 或主应用注入 __webpack_public_path__

卸载时删掉整个子应用 DOM 节点，浏览器自动重建 CSSOM，样式确实清除了——但这只对初始加载的和有效。动态插入的样式仍会残留。

子应用运行时通过 document.head.appendChild( 加的样式，不在容器节点下，卸载不清理 → 必须禁用该操作，改用主应用提供的样式注入接口
第三方组件库（如 Ant Design）弹窗挂到 document.body，其样式脱离容器 → 需显式配置 getContainer: () => container，强制渲染到子应用根节点内
全局作用样式（如 body { margin: 0 }）会逃逸 → 开启 qiankun 的 styleIsolation: 'scoped' 或手动做样式快照（document.styleSheets 列表在挂载前保存，卸载后恢复）

直接 shadowRoot.innerHTML = htmlString 等于主动放弃隔离——内联会逃逸到 light DOM，<script></script> 在全局执行，XSS 风险拉满。

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

必须用 DOMParser 解析 HTML 字符串，再遍历所有标签，提取 textContent，用 CSSStyleSheet API 创建实例：const sheet = new CSSStyleSheet(); sheet.replaceSync(styleText);
注入时只能走 shadowRoot.adoptedStyleSheets = [sheet]，不能 append 到 shadowRoot —— 后者只是普通 DOM 插入，无作用域约束
必须拦截并转成 CSS 字符串再注入；@import 和相对 url() 需主应用代理重写，否则加载失败或路径错乱

iframe 白屏不报错，90% 是 HTML 结构或加载时机问题，不是 JS 错误。

src 值为空、javascript:void(0) 或 file:// 协议，现代浏览器静默拒绝 → 动态赋值前必须校验：if (url && (url.startsWith('http') || url.startsWith('/')))
未设宽高，或父容器是 display: flex / grid → iframe 默认尺寸 300×150px，会被压缩至 0 → 必须显式写 style="width: 100%; height: 400px;"
子应用 HTML 中含

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！