在现代 Web 开发中，跨标签页通信的需求越来越普遍。无论是实现多标签页之间的数据同步，还是构建实时协作功能，跨标签页通信都能极大地提升用户体验。今天，我们将探讨一种简单而强大的实现方式：window.postMessage。

一、什么是 window.postMessage？

window.postMessage 是一个用于跨窗口或跨标签页通信的 API。它允许一个窗口向另一个窗口发送消息，即使这两个窗口的来源不同。这种方法可以安全地实现跨源通信，而不会暴露窗口的 DOM 或 JavaScript 环境。

（一）特点

• 跨源通信：可以在不同来源的窗口之间安全地发送消息。
• 简单易用：API 简洁，易于上手。
• 事件驱动：通过监听 message 事件接收消息。

（二）适用场景

• 多标签页数据同步：在多个标签页之间同步数据，如用户状态、实时消息等。
• 实时协作：多个用户在不同标签页上协作编辑文档或进行实时交互。
• 页面间通信：在父页面和弹出窗口之间通信。

二、使用 window.postMessage 实现跨标签页通信

（一）基本用法

window.postMessage 方法接受两个参数：

1. 数据：要发送的消息，可以是字符串、对象等。
2. 目标窗口的来源：目标窗口的来源（origin），用于确保消息只发送到指定的窗口。如果目标窗口的来源不确定，可以使用 * 作为通配符。

（二）发送消息

在页面一中，通过 window.postMessage 发送消息。

（三）接收消息

在页面二中，通过监听 message 事件接收消息。

（四）效果

1. 打开页面一，点击“弹出新窗口”按钮，打开页面二。
2. 在页面一中输入消息并点击“发送数据”按钮。
3. 页面二的控制台会打印出接收到的消息。

三、注意事项

（一）同源限制

虽然 window.postMessage 支持跨源通信，但为了安全起见，建议明确指定目标窗口的来源（origin）。如果目标窗口的来源不确定，可以使用 * 作为通配符，但这样做会降低安全性。

（二）安全性

在接收消息时，应验证消息的来源和内容，以防止恶意攻击。可以通过检查 event.origin 和 event.source 来确保消息来自可信的窗口。

（三）性能影响

虽然 window.postMessage 的性能开销较小，但在高频率发送消息时，仍需注意对性能的影响。