【PostMessage格式】在Web开发中，`postMessage` 是一种用于跨窗口通信的机制，常用于不同源之间的页面之间进行安全的数据交换。它允许一个窗口向另一个窗口发送消息，并且接收方可以监听这些消息并做出响应。下面是对 `postMessage` 格式的总结。
一、PostMessage 基本格式
`postMessage` 方法的基本语法如下：
```javascript
window.postMessage(message, targetOrigin);
```
- message：要发送的数据，可以是字符串、对象等。
- targetOrigin：目标窗口的来源（协议 + 主机 + 端口），用于限制消息只能发送到指定的源。
二、消息接收方式
接收方需要通过 `window.addEventListener('message', callback)` 来监听消息。
```javascript
window.addEventListener('message', function(event) {
// 处理接收到的消息
});
```
三、PostMessage 格式总结表
| 参数 | 类型 | 说明 |
| `message` | Object/Str | 要发送的数据内容，可以是任意可序列化的数据类型（如字符串、对象等） |
| `targetOrigin` | String | 目标窗口的来源地址，例如 `"https://example.com"` 或 `""`（表示任意源） |
| `source` | Window | 发送消息的窗口对象（仅在接收端可用） |
| `origin` | String | 消息来源的协议、主机和端口号（仅在接收端可用） |
四、使用示例
发送方代码：
```javascript
const otherWindow = window.open('https://example.com');
otherWindow.postMessage({ name: 'John', age: 30 }, 'https://example.com');
```
接收方代码：
```javascript
window.addEventListener('message', function(event) {
if (event.origin !== 'https://yourdomain.com') return; // 安全校验
console.log('收到消息:', event.data);
});
```
五、注意事项
- 使用 `postMessage` 时应始终验证 `event.origin`，防止恶意攻击。
- 不建议使用 `""` 作为 `targetOrigin`，除非你明确知道对方是可信的。
- 消息内容应尽量简洁，避免传递敏感信息。
通过合理使用 `postMessage`，开发者可以在不同域之间实现安全、高效的通信，适用于 iframe、弹窗、跨域页面交互等场景。
