【PostMessage格式】在Web开发中，`postMessage` 是一种用于跨域通信的机制，允许不同源（即不同的域名、协议或端口）之间的窗口进行安全的数据交换。它广泛应用于 iframe 与父页面之间、弹窗与主页面之间，以及多标签页之间的通信。
以下是对 `postMessage` 格式的总结和说明：
PostMessage 格式总结
`postMessage` 方法是 `Window` 对象的一个方法，用于向另一个窗口发送消息。其基本语法如下：
```javascript
window.postMessage(message, targetOrigin);
```
- `message`：要发送的数据，可以是字符串、对象等。
- `targetOrigin`：指定目标窗口的来源，可以是具体的 URL 或 `""`（表示任意源）。
为了确保安全性，建议始终指定具体的 `targetOrigin`，而不是使用 `""`。
PostMessage 格式表格
| 参数 | 类型 | 说明 |
| `message` | any | 要发送的数据，可以是字符串、数字、对象、数组等。 |
| `targetOrigin` | string | 目标窗口的来源，如 `"https://example.com"`，或 `""` 表示任意源。 |
接收方监听事件
接收方需要通过 `window.addEventListener('message', callback)` 来监听来自其他窗口的消息。回调函数会接收到一个 `MessageEvent` 对象，其中包含以下重要属性：
| 属性 | 类型 | 说明 |
| `event.data` | any | 发送过来的数据。 |
| `event.origin` | string | 发送消息的窗口的源（如 `"https://example.com"`）。 |
| `event.source` | Window | 发送消息的窗口对象。 |
示例代码
发送方：
```javascript
window.opener.postMessage("Hello from child window", "https://parentdomain.com");
```
接收方：
```javascript
window.addEventListener('message', function(event) {
if (event.origin !== "https://childdomain.com") return;
console.log("Received message:", event.data);
});
```
注意事项
- 使用 `postMessage` 时应严格校验 `event.origin`，防止恶意攻击。
- 避免传递敏感信息，除非已经采取了适当的安全措施。
- 不同浏览器对 `postMessage` 的支持基本一致，但需注意兼容性问题。
通过合理使用 `postMessage`，开发者可以在保证安全的前提下实现跨域通信，提升 Web 应用的功能性和用户体验。