【PostMessage格式】在Web开发中，`postMessage` 是一种用于跨窗口通信的机制，常用于不同源之间的页面之间进行数据传递。它允许一个窗口向另一个窗口发送消息，并且可以接收来自其他窗口的消息。这种技术广泛应用于 iframe、弹窗、多窗口应用等场景中。
一、PostMessage 基本结构
`postMessage` 的基本语法如下：
```javascript
window.postMessage(message, targetOrigin);
```
- `message`：要发送的数据，可以是字符串、对象等。
- `targetOrigin`：目标窗口的来源（协议 + 域名 + 端口），用于限制消息只能发送给指定的窗口。
二、PostMessage 格式说明
| 参数 | 类型 | 说明 |
| `message` | any | 要发送的数据，支持字符串、数字、对象等 |
| `targetOrigin` | string | 目标窗口的来源，如 `"https://example.com"` 或 `""`（表示任意源） |
| `source` | Window | 发送消息的窗口对象（在接收方中可用） |
| `origin` | string | 发送消息的窗口来源（在接收方中可用） |
三、使用示例
发送方代码（发送消息）
```javascript
const targetWindow = window.open('https://example.com', '_blank');
targetWindow.postMessage('Hello from parent', 'https://example.com');
```
接收方代码（监听消息）
```javascript
window.addEventListener('message', function(event) {
if (event.origin !== 'https://parent-domain.com') {
return; // 防止恶意来源
}
console.log('Received message:', event.data);
});
```
四、注意事项
1. 安全性：应始终验证 `event.origin`，防止恶意网站注入非法数据。
2. 跨域限制：若未正确设置 `targetOrigin`，可能无法成功发送或接收消息。
3. 数据类型：发送的对象会被序列化为 JSON 格式，因此不能包含函数或特殊对象。
4. 兼容性：大多数现代浏览器都支持 `postMessage`，但旧版本可能需要额外处理。
五、总结
| 特性 | 说明 |
| 功能 | 实现跨窗口通信 |
| 语法 | `window.postMessage(data, origin)` |
| 安全性 | 必须验证来源，避免安全漏洞 |
| 数据类型 | 支持字符串、数字、对象等 |
| 使用场景 | iframe、弹窗、多窗口交互等 |
通过合理使用 `postMessage`，开发者可以在保证安全的前提下实现灵活的跨域通信功能。
