postMessage是唯一能落地的跨框架通信机制，因浏览器强制拦截所有跨域DOM操作，且document.domain已被禁用；发送端须等iframe加载完成并校验contentWindow与origin，接收端必须严格双校验event.origin和event.source，targetOrigin不可用"*"，消息体仅支持结构化克隆对象。
postMessage 是唯一能落地的跨框架通信机制，HTML 语义标签本身不提供通信能力，只负责让通信更可维护、更可访问。
为什么不能直接用 DOM 操作跨框架通信
浏览器强制拦截所有跨域 iframe.contentWindow 或 shadowRoot 的读写操作，错误信息如 Blocked a frame with origin "https://a.com" from accessing a cross-origin frame 不是警告，是终局判决。Chrome 126+ 已彻底禁用 document.domain，sandbox="allow-same-origin" 对跨域 src 无效，contentDocument 跨域时恒为 null。
postMessage 发送端必须等 load 且校验 contentWindow.location.origin
常见错误现象：消息发不出、控制台无报错、调试器里看不到 message 事件——本质是 iframe.contentWindow 还没准备好。
- 监听
iframe.onload，不是DOMContentLoaded或setTimeout - 回调中必须双重检查：
iframe.contentWindow && iframe.contentWindow.location?.origin -
targetOrigin必须写死，例如'https://widget.example.com'；填'*'会被现代浏览器静默丢弃（尤其重定向后 origin 变更） - 若
src动态切换（如测试/生产环境），需每次load后重新匹配对应targetOrigin
子页面接收消息必须同时校验 event.origin 和 event.source
只监听 message 事件等于开门揖盗。恶意页面可伪造消息，必须双保险验证。
- 用
===严格比对event.origin，禁止includes()或正则（防https://evil.example.com伪装） - 确认
event.source === iframe.contentWindow，防止同源其他窗口劫持 -
event.data只能传结构化克隆对象：支持Object、Array、Date、RegExp；不支持function、undefined、Promsie、DOM 节点——否则静默失败 - 子页
<script></script>最顶部注册监听器，避免因 JS 加载顺序错过首条握手消息
语义化如何辅助通信协议设计
HTML 标签不传输数据，但能让通信意图更清晰、状态更可同步。
立即学习“前端免费学习笔记（深入）”；
- 消息体中用
type字段标识意图（如"NAVIGATE_TO_SECTION"），配合<section id="faq"></section>的id值，让接收方能精准scrollIntoView或focus - 在 shadow DOM 内关键节点加
part="search-input"，并在自定义元素上设exportparts="search-input:main-search"，外部可通过::part(main-search)样式化或element.shadowRoot.querySelector('[part="search-input"]')获取（仅同源） - 用
role="region"+aria-labelledby标识可聚焦区域，使辅助技术感知状态变化；data-panel-id="faq-1"这类轻量标识符可用于跨框架状态桥接，但别塞业务数据
load，消息发不出；收端不验 origin 和 source，就等于把控制权交给任意网站。 
