直接使用 window.top 获取顶层 window 对象，它在同域和跨域下均安全、稳定、无异常，且顶层页中恒有 window.top === window；需判空防动态移除导致 null。
怎么从深层 iframe 安全获取顶层 window 对象
直接用 window.top，别手写 while 循环。它在同域和跨域下都可读、稳定、无异常，且 window.top === window 在顶层页恒成立。手写遍历（比如 while (p.parent && p !== p.parent)）不仅多余，还容易因跨域访问 p.parent 触发 SecurityError 卡死或返回 undefined。
常见错误现象：window.parent 链在跨域时不可访问，但开发者仍试图靠它向上找顶层，结果脚本报错或逻辑中断。
- 子 iframe 中拿到
window.top后，必须先判空再使用，极少数情况（如 iframe 被动态移除）下window.top可能为null - 微前端场景中，“业务意义上的顶层”未必是
window.top（比如主应用被嵌在另一个平台里），需由主应用显式暴露标识（如window.__MAIN_APP__ = true）并限制查找深度 - 不要依赖
window.parent的可达性做判断，它不是跨域安全的路径
跨域 iframe 间同步状态为什么不能用 DOM 或函数调用
因为浏览器同源策略会直接拦截：任何对 iframe.contentDocument、iframe.contentWindow.xxx、window.parent.xxx 的访问，在跨域时都会抛出 SecurityError: Blocked a frame with origin "https://a.com" from accessing a cross-origin frame.。这不是配置问题，是强制行为。
常见错误现象：控制台没报错但数据没更新、函数调用静默失败、contentWindow 为 null 却没检查就调用 postMessage。
立即学习“前端免费学习笔记（深入）”；
- 同域下可用
iframe.contentWindow.receiveData()直接调用，跨域下这条路完全堵死 -
document.domain只适用于同主域不同子域（如a.example.com↔b.example.com），对跨主域无效 - 代理 iframe、JSONP、CORS 都不适用于 iframe 间的 JS 状态同步，它们解决的是资源加载或 API 请求问题
postMessage 发送状态消息的实操要点
发送端必须确保 iframe 已加载完成、contentWindow 存在、目标 origin 明确——缺一不可。否则消息发不出去，且浏览器不会报错，只静默丢弃。
示例代码：
const iframe = document.getElementById('myIframe');
iframe.addEventListener('load', () => {
if (iframe.contentWindow) {
iframe.contentWindow.postMessage(
{ type: 'USER_LOGIN', token: 'abc123', expires: Date.now() + 3600000 },
'https://child.example.com'
);
}
});
- 永远传具体 origin（如
'https://child.example.com'），别用'*'，否则 XSS 风险高 - 监听
load事件后再发，避免contentWindow为null - 结构化克隆支持对象、数组、Date、RegExp，但不支持函数、
undefined、DOM 节点 - 若 iframe 可能从多个环境加载（测试/预发/生产），需在接收端白名单校验
event.origin
接收端如何可靠校验并响应跨域状态变更
接收方必须严格比对 event.origin，且仅在此前提下处理 event.data。这是唯一可信的身份凭证，event.source 不可伪造但无法独立验证来源。
示例代码：
window.addEventListener('message', (event) => {
if (event.origin !== 'https://parent.example.com') return;
if (event.data.type === 'USER_LOGIN') {
localStorage.setItem('authToken', event.data.token);
// 触发本地状态更新
}
});
- 必须用
===严格相等判断event.origin，不能用includes或正则模糊匹配 - 不要只校验
event.data.type就执行关键操作，这等于放行任意站点伪造的消息 - 若父页有多个可能域名（如
https://admin.prod.com和https://admin.staging.com），需维护 origin 白名单数组并循环比对 - 消息到达时页面可能尚未初始化完成，建议将状态暂存或触发重试机制，而非直接操作未挂载的 DOM
window.top，而接收消息的窗口也不一定就是你认为的那个；每个层级都要明确自己是否承担状态同步职责，并在对应位置注册 message 监听器。 
