postmessage是唯一通用可行的跨域iframe数据同步方式：父页和子页通过发送消息与监听message事件实现双向通信，必须指定目标窗口、校验event.origin、传递可序列化数据，并在iframe重载或src变更后重新建立通信链路。
iframe 本身不支持直接“联动更新数据”，所谓联动，本质是父子页面间的消息通信与状态同步。没有 postMessage 就没有可靠联动，其他方式（如 document.domain、window.name）适用场景极窄，且已逐步被现代浏览器限制或弃用。
postMessage 是唯一通用可行的跨域 iframe 数据同步方式
父页和子页只要调用 postMessage 发送消息，并监听 message 事件，就能完成双向通信。它不依赖同源，不修改服务端配置，也不需要代理，是 HTML5 原生支持的标准方案。
- 发送方必须指定目标窗口对象（
iframe.contentWindow或event.source），不能只写window.parent这类模糊引用 - 接收方必须校验
event.origin，否则可能被恶意 iframe 注入伪造消息 - 消息体只能是可序列化的值（
JSON.stringify能处理的），不能传函数、DOM 节点或File对象 - 若子页重载（如表单提交后刷新），需在新加载完成后重新绑定
message监听器，否则后续消息收不到
iframe src 动态变更时，如何保持通信链路不断
常见误区是以为改了 src，之前建立的 contentWindow 引用还能继续用。实际上，一旦 src 变更，旧的 contentWindow 会失效，新页面加载完成前无法调用 postMessage。
- 不要缓存
iframe.contentWindow到变量里反复用；每次发消息前都应确认其可用性（iframe.contentWindow && !iframe.contentWindow.closed） - 监听
iframe的load事件，在回调中重新建立通信准备（例如发初始化消息、绑定新message监听） - 如果子页由你控制，可在子页加载完成后主动向父页发一条
ready消息，父页收到后再开始业务通信 - 避免在子页未加载完就调用
postMessage，否则静默失败，控制台无报错
父页如何安全地把用户数据传给子 iframe
不是所有数据都适合通过 postMessage 传递。敏感字段（如 token、session_id）不应明文塞进消息体，而应由子页自行从自身域下获取（比如调用自己域的 /api/user 接口）。
- 只传必要上下文：如
{ userId: 'u123', locale: 'zh-CN', theme: 'dark' } - 避免传大对象（如整个用户 profile），容易触发浏览器消息大小限制（Chrome 约 1MB）
- 若需传二进制数据（如图片 blob），先用
URL.createObjectURL()生成临时 URL，再传字符串地址，由子页自行 fetch - 子页收到消息后，建议用
JSON.parse(JSON.stringify(data))深拷贝一次，防止父页后续意外修改原对象影响子页逻辑
真正难的不是发消息，而是状态一致性——比如父页通知子页“刷新订单列表”，子页执行后是否成功？有没有网络中断？有没有重复触发？这些都需要设计响应机制和超时兜底，而不是靠一次 postMessage 就认为联动完成了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
