iframe 本身不支持跨标签页状态同步，需通过 localStorage 持久化 URL + BroadcastChannel 实时广播 + postMessage 跨域通信协同实现；同源下可直接读写，跨域需子页面主动上报并校验 origin。
HTML内联框架（<iframe>）本身不具备跨标签页的状态保持能力——每个浏览器标签页拥有独立的 DOM、JavaScript 执行上下文和存储空间。因此，**iframe 的当前加载 URL、滚动位置、表单输入、页面内路由等状态，默认不会在多个标签页间自动同步**。要实现“多标签页中保持 iframe 状态”，核心不是让 iframe 自己跨页记忆，而是通过共享状态 + 主动恢复机制来达成一致体验。
用 localStorage 持久化当前 iframe URL
这是最常用、兼容性最好的基础方案。关键在于把用户在某个标签页中最终访问的 iframe 子页面地址存下来，其他标签页加载时读取并主动跳转。
- 当 iframe 内部完成一次跳转（例如从
pageA.html到pageB.html），子页面（同源时）或父页面（通过postMessage接收）将最新 URL 存入localStorage，例如：localStorage.setItem('activeIframeUrl', 'https://app.com/pageB.html') - 父页面在初始化阶段（推荐在
DOMContentLoaded后加微任务延迟）检查该值，并设置 iframe 的src：const saved = localStorage.getItem('activeIframeUrl'); if (saved) iframe.src = saved; - 注意校验 URL 合法性（
new URL(saved)），避免注入或相对路径解析错误
用 BroadcastChannel 实现多标签页实时同步
仅靠 localStorage 无法触发其他已打开标签页的即时响应（它只发 storage 事件，且不包含新值）。BroadcastChannel 可弥补这一缺口，让所有同源标签页“听到”状态变更。
- 任一标签页修改 iframe 地址后，立即广播：
const bc = new BroadcastChannel('iframe-state'); bc.postMessage({ type: 'url-change', url: 'https://app.com/pageC.html' }); - 其他标签页监听并响应：
bc.addEventListener('message', e => { if (e.data.type === 'url-change') iframe.src = e.data.url; }); - 需配合 localStorage 持久化，确保新打开的标签页也能恢复，而不仅限于已存在的标签页
处理跨域 iframe 的状态同步
若 iframe 加载的是第三方域名（如 SaaS 工具、微前端子应用），父页面无法直接读取其 location.href，必须依赖子页面主动上报。
立即学习“前端免费学习笔记（深入）”；
- 子页面每次导航后（包括
pushState、hashchange或点击跳转），调用：window.parent.postMessage({ type: 'iframe-url-change', url: window.location.href }, 'https://parent-domain.com'); - 父页面监听消息，校验
event.origin后存入localStorage并广播：if (event.origin === 'https://child-domain.com') { localStorage.setItem(...); bc.postMessage(...); } - 避免重复写入：可用
Set缓存最近几条 URL，或对消息加时间戳+防抖
补充：登录态与表单数据的跨页延续
除了 URL，用户在 iframe 内的登录凭证、未提交的表单内容等也需跨标签页保持。
- 同源场景：直接复用
localStorage或sessionStorage中的 token 和字段值；父页面可统一管理并透传给 iframe - 跨域场景：登录成功后，父页面通过
postMessage将 token 发送给 iframe；表单数据则建议由 iframe 自身持久化到自己的localStorage（以 domain 为命名空间），并在加载时恢复 - 注意安全：敏感凭证避免明文存 localstorage；跨域通信务必校验 origin，不信任
'*'
