前端开发中的 postMessage用法详解

`postMessage()`是前端JavaScript原生提供的一个功能，主要用于在Web Workers或两个不同的同源窗口之间进行跨线程通信。它允许一个脚本向另一个脚本发送消息，而不需要通过服务器作为中介。

以下是`postMessage()`的基本用法：

// 主页面（sender）
window.postMessage('Hello', 'https://example.com'); // 指定目标URL和来源

// 被监听的页面（receiver）
window.addEventListener('message', function(event) {
  if (event.origin === 'https://example.com') { // 验证消息是否来自预期源头
    console.log('Received message:', event.data); // 打印接收到的数据
  }
}, false);

- `postMessage(message[, targetOrigin[, transfer]])`: 方法接收一个字符串`message`作为要发送的消息，还可以选择指定`targetOrigin`（默认值为当前页面的协议、主机名和端口号），用于限制消息可以接收的来源。`transfer`参数可以是一个数组，包含要在通信期间传输的DOM对象，它们会在接收者那里创建一个独立的副本。

- 在事件监听器中，`event`对象提供有关发送消息的信息，包括`data`属性（存储传递的消息）和`origin`属性（消息发送者的地址）。