iframe本身不提供路由能力，所谓“路由隔离”是主应用用JS控制src切换+后端fallback配合的结果；直接写<iframe src="app1.html">无法响应URL变化，因浏览器不监听地址栏变更自动更新src，子应用的路由操作只影响自身iframe内地址，父页URL不变，刷新即丢失状态，且主应用无法感知子路径，导致前进/后退、分享、SEO全部失效。
iframe 本身不提供路由能力，所谓“路由隔离”是主应用用 JS 控制 iframe 的 src 切换 + 后端 fallback 配合的结果，不是 iframe 自带的功能。
为什么直接写 <iframe src="app1.html"> 无法响应 URL 变化
浏览器不会监听当前页面 URL 改变并自动更新 iframe 的 src；子应用的 history.pushState 或 router-link 点击后，只改了 iframe 内部地址，父页面 URL 不变，刷新就丢状态；主应用也无法感知子应用当前路径，导致前进/后退、分享链接、SEO 等全部失效。
常见错误现象：
- 点击子应用内菜单，地址栏没变，刷新后回到主应用首页
- 手动输入
/app1/detail/123，404 或加载主应用 layout - 子应用用了 Vue Router 的 hash 模式，但父页没监听
hashchange，iframe 不切换
正确做法是主应用主动接管路由：
立即学习“前端免费学习笔记（深入）”；
- 监听
window.addEventListener('popstate', ...)和hashchange（取决于你用 history 还是 hash） - 解析当前 URL 路径，匹配前缀如
/app1/，提取剩余路径传给子应用 - 动态设置
iframe.src = '/app1/index.html#/detail/123'（hash 模式）或用src="/app1/detail/123"（history 模式需后端 fallback） - 子应用必须禁用自己的初始路由导航，等主应用通过
postMessage通知后再启动
src 必须是可访问的 HTML 页面，不是 JS 入口文件
写成 <iframe src="app.js"> 或 <iframe src="dist/main.js"> 是无效的：现代浏览器拒绝加载非 HTML 响应体，控制台只报 net::ERR_FAILED，且无任何提示。
生产环境必须确保：
- 子应用部署为完整可访问的 HTML 页面，如
/micro/cart/index.html - 该 HTML 中已内联或引入了子应用的 JS/CSS（即它自己能独立运行）
- 本地开发必须起 HTTP 服务，不能双击打开
file://协议页面 - 动态赋值前校验协议：
if (url.startsWith('http') || url.startsWith('/')) iframe.src = url;
错误示例：iframe.src = 'app.js' → 尝试请求当前路径下 app.js，比如 /admin/user/app.js，必然 404。
后端 fallback 规则必须按子应用路径逐条配置
子应用用 history 模式时，用户直接访问 /app1/detail/123，请求会打到主应用服务器；若没配置 fallback，返回 404；若只配了根路径 fallback（如 location / { try_files $uri $uri/ /index.html; }），所有子路径都会加载主应用，而不是子应用。
正确配置示例（Nginx）：
location /app1 {
try_files $uri $uri/ /app1/index.html;
}
location /app2 {
try_files $uri $uri/ /app2/index.html;
}
关键点：
- 每条子应用路径都要单独配一条
location，不能合并或偷懒用正则通配 -
try_files的 fallback 目标必须指向子应用自己的index.html，不是主应用的 - 如果子应用部署在独立域名（如
https://cart.example.com），fallback 规则要落在主站网关层，由网关转发请求，而非前端 Nginx
sandbox 属性写空值会导致 iframe 白屏且无提示
写成 <iframe sandbox src="app1.html"> 或 <iframe sandbox="" src="app1.html">，浏览器直接拒绝解析响应体，Network 显示 net::ERR_BLOCKED_BY_RESPONSE，iframe 完全空白，控制台无 JS 错误，HTML 标签都没被构建。
这是因为 sandbox 是白名单机制，空值等于“禁止一切”，包括脚本执行、DOM 渲染、表单提交等基础能力。
最小可用组合（推荐起步）：
-
sandbox="allow-scripts"：JS 可运行，但 localStorage/sessionStorage 是空的，无法访问window.parent - 需要通信时，只加
allow-scripts，再用postMessage，不要碰allow-same-origin - 绝对避免
sandbox="allow-scripts allow-same-origin"—— 同源时子应用可直接读写父页 cookie 和 DOM，权限系统里极其危险
真正容易被忽略的是：即使加了 allow-scripts，子应用里的 localStorage.setItem('a', '1') 也只在 iframe 内有效，刷新即丢；所有状态必须由主应用统一托管，通过消息同步。
