【PostMessage格式】在Web开发中，`PostMessage` 是一种用于跨窗口通信的机制，常用于不同源（Origin）之间的安全数据传递。它允许一个窗口向另一个窗口发送消息，并且接收方可以监听这些消息并做出响应。这种技术广泛应用于iframe嵌套、跨域页面交互等场景。
一、PostMessage基本格式总结
| 参数 | 说明 |
| `targetWindow` | 目标窗口对象，通常是通过 `window.open()` 或 `iframe.contentWindow` 获取的窗口引用。 |
| `message` | 要发送的数据内容，可以是字符串、JSON对象或其他可序列化的数据类型。 |
| `targetOrigin` | 指定目标窗口的来源（协议 + 域名 + 端口），用于安全验证。可以使用 `""` 表示任意来源（不推荐用于生产环境）。 |
二、PostMessage的使用方式
1. 发送消息（发送端）
```javascript
// 假设 targetWindow 是目标窗口的引用
targetWindow.postMessage(message, targetOrigin);
```
- message：要发送的数据。
- targetOrigin：目标窗口的来源，如 `"https://example.com"`。
2. 接收消息（接收端）
```javascript
window.addEventListener('message', function(event) {
// 验证来源
if (event.origin !== 'https://expected-origin.com') return;
// 处理接收到的消息
console.log('收到消息:', event.data);
});
```
- event.origin：发送消息的窗口来源。
- event.data：接收到的消息内容。
三、注意事项
| 注意事项 | 说明 |
| 安全性 | 不应随意使用 `""` 作为 `targetOrigin`，否则可能引发跨站攻击。 |
| 数据类型 | 支持字符串、JSON对象等，但需确保双方能正确解析。 |
| 跨域限制 | 必须满足同源策略或通过 `CORS` 配置允许通信。 |
| 浏览器兼容性 | 现代浏览器均支持，但在旧版本中可能存在差异。 |
四、典型应用场景
| 场景 | 说明 |
| iframe与父页面通信 | 用于嵌入第三方内容时的安全交互。 |
| 多窗口通信 | 如弹窗与主窗口之间的数据传递。 |
| 单页应用跨组件通信 | 在同一个页面内不同组件之间传递状态信息。 |
五、总结
`PostMessage` 是一种高效、灵活的跨域通信方式，适用于多种Web场景。合理使用其格式和参数，可以有效提升应用的交互性和安全性。开发者在使用时应特别注意来源验证和数据安全，避免潜在的安全风险。