在JavaScript中，如何实现跨文档通信（Cross-Document Messaging）？

跨文档通信通过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，可以通过 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);

常见应用场景

跨文档通信适用于多种实际场景：

Calliper 文档对比神器

文档内容对比神器

28

查看详情

立即学习“Java免费学习笔记（深入）”；

• 主页面与嵌入的第三方 iframe 进行交互（如支付、登录）。
• 多个标签页之间共享状态（结合 localStorage 和 message 通知）。
• 弹出认证窗口后将令牌传回主页面。

基本上就这些。只要正确使用 postMessage 和验证 origin，就能实现安全、有效的跨域通信。

以上就是在JavaScript中，如何实现跨文档通信（Cross-Document Messaging）？的详细内容，更多请关注php中文网其它相关文章！