iframe刷新后回退到初始页是设计使然，因其src属性不随内部导航自动更新；需通过localstorage存取当前url或url参数透传实现状态持久化，跨域时必须依赖postmessage协同。
iframe 刷新后总是重载 src，不是缓存问题，是设计使然
主页面刷新时 iframe 回到初始页，根本原因不是浏览器“没缓存好”，而是 iframe 的 src 属性本身不会随内部导航自动更新。浏览器只认你写死的 src 值，刷新就重新 fetch 一次——哪怕内容刚加载过、哪怕 HTTP 缓存还有效。这不是 bug，是规范行为。
所以别盯着 Cache-Control 或 Expires 头打转，那些只管资源是否复用，不解决“状态丢失”这个核心痛点。
- 同源 iframe：父页能读
iframe.contentWindow.location.href，但需主动监听load事件捕获跳转 - 跨域 iframe：父页完全无法读取内部 URL，必须靠子页调用
window.parent.postMessage()主动上报 - 无论同源与否，
keep-alive对 iframe 无效——它缓存的是组件实例，不是独立浏览上下文
用 localStorage 恢复 iframe 当前页，但要注意触发时机
最常用方案是把 iframe 当前 URL 存进 localStorage，父页加载时读出来重设 src。但容易踩坑的是：存和取的时机不对，会导致“存了但没生效”或“取早了得到空值”。
- 存的时候：不能只在 iframe 初始加载时存，得在每次内部跳转完成后再存——推荐监听 iframe 的
load事件（同源）或接收message（跨域） - 取的时候：不能在 DOMContentLoaded 后立刻改
src，要等 iframe 元素已挂载且src属性可写；建议用setTimeout(() => { ... }, 0)或requestIdleCallback延后执行 - 值校验：从
localStorage读出的 URL 必须通过new URL()校验合法性，避免注入或相对路径解析错误
跨域 iframe 状态同步，postMessage 是唯一可行路径
如果你的 iframe 加载的是第三方域名或微前端子应用，父页无法直接访问其 location，postMessage 不是备选方案，是强制要求。
- 子页需在每次路由变更后（如 history.pushState、hashchange、或点击跳转后）主动发消息：
window.parent.postMessage({ type: 'iframe-url-change', url: window.location.href }, '*') - 父页监听时必须校验
event.origin，不能无条件信任'*'；推荐白名单匹配，例如if (event.origin !== 'https://trusted-domain.com') return - 消息可能重复触发（比如 SPA 路由多次变更），建议加防抖或用
Set去重再写入localStorage
URL 参数透传比 cookie 更可靠，但要避开 hash 冲突
把 iframe 当前页编码进父页 URL（如 ?iframe-src=https%3A%2F%2Fexample.com%2Fpage2）能实现无存储、可分享的状态同步，但实际落地常被忽略细节。
- 不要用
location.hash存，因为 hash 变更会触发hashchange，而 iframe 自身也可能用 hash 做路由，导致冲突或无限循环 - 要用
URLSearchParams解析 query 参数，避免手撕字符串出错；设置时用history.replaceState更新 URL，不触发刷新 - 如果父页本身已有大量 query 参数，新增 iframe 状态参数前先做去重合并，否则可能覆盖原有业务参数
真正麻烦的从来不是“怎么存”，而是“什么时候存、谁来存、存完谁来读、读完怎么安全地喂给 iframe”。跨域场景下，子页必须承担一部分协作责任，光靠父页单方面操作注定失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
