动态创建 iframe 是生产环境硬性要求，因硬编码 src 无法实现路由同步、错误处理与通信；须 js 控制生命周期、校验 postmessage origin、显式设置尺寸与滚动行为，并桥接 history、错误降级与可调试链路。
直接用 <iframe src="xxx"></iframe> 标签写死子应用地址，不算微前端——它连路由同步、错误处理、通信能力都没有，只是个静态嵌入。
为什么动态创建 iframe 是生产环境的硬性要求
硬编码 <iframe src="https://cart.example.com"></iframe> 只适合 demo；真实场景中，主应用必须用 JS 控制生命周期，否则会立刻掉进几个坑里：
- 切换路由时旧
iframe没销毁，内存泄漏 + 多个子应用同时运行 - 用户点浏览器「后退」，
window.history变了，但iframe.src滞后甚至卡死 - 子应用加载失败（404、跨域拒绝、JS 报错），主应用完全感知不到，页面白屏无提示
- 多个子应用共用一个
name，后续window.frames['xxx']通信定向失败
正确做法是每次路由匹配后，先 iframe.remove()，再 document.createElement('iframe') 并设置 name、sandbox、src，最后挂载到容器中。
postMessage 通信必须校验 origin，不能偷懒写 '*'
跨域子应用下，iframe.contentDocument 直接报 DOMException: Blocked a frame from accessing a cross-origin frame，这是浏览器铁律。唯一通路是 postMessage，但极易因疏忽引入安全漏洞或消息丢失：
- 主应用发消息前，必须确认
iframe.contentWindow存在且非null（建议在iframe.onload后再发） - 发送时目标
origin必须精确，如iframe.contentWindow.postMessage(data, 'https://sub.example.com')，写'*'等于裸奔 - 子应用接收方必须检查
event.origin是否在白名单内，不匹配就return，否则可能被钓鱼站点伪造消息 - 子应用初始化完成应主动发
{ type: 'READY' }，主应用靠这个判断是否真正就绪，而不是只等load事件
iframe 尺寸塌陷和跨域滚动穿透是移动端高频翻车点
iframe 默认尺寸是 300×150px，在 Flex/Grid 容器中极易被压缩为 0×0，表现为“看不见但已加载”。更隐蔽的是移动端滚动穿透问题：
- 父容器没设
height或min-height，iframe在响应式布局中直接消失，需显式写style="width: 100%; height: 400px;"或用aspect-ratio: 16 / 9 - 禁用滚动条不能用废弃的
scrolling="no"，而要在父容器加overflow: hidden - 移动端需额外加
touch-action: auto和height: 100vh，否则手指滑动会直接滚父页面，子应用内容卡住不动 - 本地开发若用
file://协议打开 HTML，所有跨域通信都会静默失败，必须起 HTTP 服务（如python3 -m http.server 8000）
真正难的不是把子应用塞进 iframe，而是让整个链路具备可观察、可降级、可调试的能力：URL 同步要桥接 history API，错误要捕获并 fallback 到空状态页，通信要带类型标识和版本字段——这些细节漏掉任何一环，上线后就是线上事故的温床。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
