小结：利用PostMessage实现Web中的跨文档通信

本周开发项目时，做了一个技术小结，帮助快速理解 & 使用 PostMessage。

PostMessage是通信API，它允许不同窗口之间进行跨文档通信，包括同源和跨源的通信。

基本使用方法

使用PostMessage非常简单，主要包括两个步骤：发送消息和接收消息。

发送消息

在发送消息的窗口中，使用postMessage方法：

// 发送消息的窗口
var targetWindow = window.parent; // 或者指定其他窗口
var message = 'Hello, this is a message!';
targetWindow.postMessage(message, 'https://example.com');

接收消息

在接收消息的窗口中，监听message事件：

// 接收消息的窗口
window.addEventListener('message', function(event) {
  // 确保消息是从期望的源发来的
  if (event.origin === 'https://example.com') {
    // 处理收到的消息
    console.log('Received message:', event.data);
  }
});

注意事项

在使用PostMessage时，需要注意一些事项：

1. 安全性考虑：验证消息来源，使用event.origin属性验证消息的来源，防止恶意攻击。
2. 精细化控制：精确指定目标窗口，减少安全风险postMessage(message, target);。
3. 数据序列化：确保要传递的数据可以被序列化为字符串，使用JSON.stringify和JSON.parse进行处理。
4. 避免循环：小心避免形成消息循环，防止无限递归。

简单示例

一个简单的例子是在一个窗口中点击按钮触发消息，另一个窗口接收并处理该消息：

// 发送消息的窗口
function sendMessage() {
  var message = { type: 'buttonClick', data: 'Button clicked!' };
  window.parent.postMessage(message, 'https://example.com');
}

// 接收消息的窗口
window.addEventListener('message', function(event) {
  if (event.origin === 'https://example.com' && event.data.type === 'buttonClick') {
    // 处理接收到的消息
    console.log('Received button click event:', event.data.data);
  }
});