JavaScript跨文档通信的几种方法有哪些？

本篇文章向大家介绍《JavaScript中实现跨文档通信的方法有哪些？》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

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

常见应用场景

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

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

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

终于介绍完啦！小伙伴们，这篇关于《JavaScript跨文档通信的几种方法有哪些？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！