跨域通信利器：使用 postMessage API 实现数据传输

postMessage API 是 HTML5 提供的一种跨窗口通信机制，用于实现不同域之间的数据传输。使用 postMessage API，可以在不同窗口之间发送消息并接收消息，从而实现跨域通信。

在实际应用中，通常会有两个不同域的页面需要进行通信。比如，一个页面通过 iframe 嵌入了另一个域的页面，需要在它们之间进行数据传输。这时，就可以使用 postMessage API 来完成跨域通信。

以下是一个使用 postMessage API 进行跨域通信的示例：

在父窗口中，定义一个消息处理函数，用于接收来自子窗口的消息：

function handleMessage(event) {
  // 处理来自子窗口的消息
  console.log(event.data);
}

// 监听消息事件
window.addEventListener('message', handleMessage);

在子窗口中，使用 postMessage 方法向父窗口发送消息：

// 向父窗口发送消息
window.parent.postMessage('Hello, parent window!', '*');

在父窗口中，处理来自子窗口的消息：

function handleMessage(event) {
  // 判断消息来源是否为子窗口
  if (event.origin !== 'http://child.example.com') {
    return;
  }

  // 处理来自子窗口的消息
  console.log(event.data);
}

// 监听消息事件
window.addEventListener('message', handleMessage);

在上面的示例中，父窗口监听 message 事件，当收到来自子窗口的消息时，会调用 handleMessage 函数进行处理。子窗口通过 postMessage 方法向父窗口发送消息，其中第一个参数是要发送的消息内容，第二个参数是目标窗口的源（origin），使用 '*' 表示可以向任意源发送消息。

需要注意的是，在父窗口中，需要对消息来源进行验证，避免接收到来自未知源的恶意消息。在示例中，我们使用 event.origin 属性获取消息来源的域名，并与预期的域名进行比较，如果不一致则不处理消息。