跨文档通信通过postMessage实现，允许不同源窗口安全传递数据。①使用postMessage发送消息，如向iframe发送：iframe.contentWindow.postMessage('Hello', 'https://example.com')，第一个参数为可序列化数据，第二个为目标源；②接收方监听message事件，验证event.origin并处理event.data；③可通过event.source回传消息。应用于主页面与第三方iframe交互、多标签页状态共享、弹出窗口传令牌等场景。正确验证origin可确保通信安全。
跨文档通信（Cross-Document Messaging）在JavaScript中通过 postMessage() 方法实现，允许不同源的窗口之间安全地传递数据。这种机制常用于 iframe 与父页面、弹出窗口或不同标签页之间的通信。
使用 postMessage 发送消息
要向另一个窗口发送消息，调用目标窗口的 postMessage() 方法，传入数据和目标源（origin）。这个方法接受两个参数：要发送的数据和目标窗口的协议、主机和端口（即源策略）。
示例：向 iframe 发送消息假设有一个 iframe，可以通过 contentWindow 访问其窗口对象：
const iframe = document.getElementById('myIframe');
// 发送消息
iframe.contentWindow.postMessage('Hello from parent!', 'https://example.com');
说明：
- 第一个参数可以是字符串、对象、数组等可序列化的数据。
- 第二个参数是目标窗口的源，用于安全控制。设置为
*表示任意源，但不推荐用于生产环境。
监听 message 事件接收消息
接收方需要监听全局的 message 事件，从事件对象中提取发送方、数据和源信息。
window.addEventListener('message', function(event) {
// 检查消息来源是否可信
if (event.origin !== 'https://trusted-site.com') {
return;
}
// 处理接收到的数据
console.log('收到消息:', event.data);
console.log('来自:', event.origin);
});
关键点：
- event.data 是发送的数据内容。
- event.origin 表示发送方文档的源，必须验证以防止恶意攻击。
- event.source 可用于回传消息，例如：
event.source.postMessage('收到！', event.origin);
常见应用场景
跨文档通信适用于多种实际场景：
立即学习“Java免费学习笔记（深入）”；
- 主页面与嵌入的第三方 iframe 进行交互（如支付、登录）。
- 多个标签页之间共享状态（结合 localStorage 和 message 通知）。
- 弹出认证窗口后将令牌传回主页面。
基本上就这些。只要正确使用 postMessage 和验证 origin，就能实现安全、有效的跨域通信。
