iframe在spa中频繁销毁重载是因为路由切换导致其dom节点被卸载，浏览器立即销毁上下文；保活关键在于将其容器移出路由组件树、用css显隐控制而非条件渲染，并通过postmessage同步状态与监听加载完成信号。
iframe在SPA中为什么会频繁销毁重载
因为绝大多数 SPA 路由方案（比如 Vue Router 的 <router-view></router-view> 或 React Router 的 <outlet></outlet>）默认把 iframe 当作普通组件渲染。一旦路由切换，旧组件被 unmount，<iframe src="..."></iframe> 标签被 DOM 移除 —— 浏览器立刻销毁其上下文，下次再进就重新加载、状态全丢。
这不是 iframe 本身的问题，是视图层组织方式导致的。你看到的“卡顿”“登录态丢失”“表单清空”，本质是 iframe 实例反复重建。
- 同源 iframe 重建后，
contentWindow是全新对象，之前绑定的事件、定时器、全局变量全部消失 - 跨域 iframe 重建后，父页无法读取其
location.href，也无法恢复导航历史 - 即使只改 query 参数，只要
src字符串变了，浏览器就当新资源处理，强制 reload
保活 iframe 的核心：DOM 不销毁，只切 visibility
关键不是“怎么让 iframe 不 reload”，而是“不让它进 DOM 销毁流程”。正确做法是把 iframe 容器从路由组件树里拎出来，放到 App 根节点或 Layout 层级，和 <router-view></router-view> 并列存在。
控制显隐必须用 v-show（Vue）或 display: none（React），绝不能用 v-if 或条件渲染。前者只是 CSS 隐藏，iframe 的 contentWindow 和 JS 上下文全程保留；后者等于删 DOM 节点，等价于刷新。
- iframe 容器需固定宽高（如
100vw/100vh），避免 layout shift - 隐藏时建议加
pointer-events: none防止误操作穿透 - 显隐切换瞬间可触发
iframe.contentWindow.focus()，避免键盘焦点丢失
跨域 iframe 状态同步只能靠 postMessage + 主动上报
同源时，父页能直接读写 iframe.contentWindow.location.href 或调用其方法；跨域时，这行不通。iframe 内部必须主动通过 window.parent.postMessage() 告知当前状态，父页监听 message 事件做响应。
常见漏点：iframe 页面没监听页面跳转，导致 URL 变化了但没上报；或者父页没校验 event.origin，留下 XSS 风险。
- iframe 内需监听
popstate和hashchange，每次变化都postMessage({ type: 'url-change', url: location.href }) - 父页收到消息后，应存入
sessionStorage或更新 URL 的 hash/query，否则刷新就断连 - 首次加载时，父页可通过
postMessage({ type: 'init', token: 'xxx' })注入认证信息，iframe 收到再渲染主内容
iframe 加载完成时机容易误判
很多人用 iframe.onload 或 addEventListener('load')，但这只表示 iframe 的初始 src 加载完了，不保证内部 JS 执行完、Vue/React 应用挂载好、甚至不保证页面渲染完毕。
尤其当 iframe 内是 SPA，onload 触发时可能刚吐出一个空壳 HTML，后续路由跳转、数据请求全没发生。这时候去调 contentDocument 或注入脚本，大概率报错。
- 更可靠的信号是 iframe 内部主动发
postMessage({ type: 'ready' })，代表应用已 mount 完毕 - 父页不要依赖
DOMContentLoaded，它对 iframe 内容无效；load事件又太早，且跨域时不可靠 - 若必须操作 iframe DOM，先检查
iframe.contentDocument?.readyState === 'complete'，再延后一帧（requestAnimationFrame）确保渲染队列清空
popstate 去同步 iframe 状态，结果页面跳走了但 iframe 还卡在旧页。这种体验断裂，比加载慢更伤人。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
