【PostMessage格式】在Web开发中，`PostMessage` 是一种用于跨域通信的机制，允许不同源（域名、协议或端口不同）的窗口之间安全地进行数据传递。它广泛应用于iframe、弹出窗口、多页面应用等场景中，确保了信息传输的安全性与灵活性。
一、PostMessage基本概念
`PostMessage` 是 HTML5 引入的一个 API，全称为 `window.postMessage()`。通过该方法，一个窗口可以向另一个窗口发送消息，而无需依赖传统的跨域请求方式，如 JSONP 或 CORS。
其核心功能是：
- 允许不同源之间的通信
- 安全性高，可指定目标窗口的来源
- 支持任意类型的数据传递（字符串、对象、数组等）
二、PostMessage格式详解
`postMessage` 方法的基本语法如下：
```javascript
otherWindow.postMessage(message, targetOrigin);
```
| 参数名 | 类型 | 说明 |
| `message` | 要传递的数据，可以是字符串、对象、数字等 | |
| `targetOrigin` | String | 目标窗口的源（origin），例如 `"https://example.com"` |
三、使用流程
1. 发送方（Sender）代码示例：
```javascript
const targetWindow = window.open('https://example.com', 'myWindow');
targetWindow.postMessage({ data: 'Hello from sender' }, 'https://example.com');
```
2. 接收方（Receiver）代码示例：
```javascript
window.addEventListener('message', function(event) {
if (event.origin !== 'https://sender.com') return; // 验证来源
console.log('Received message:', event.data);
});
```
四、PostMessage格式总结表
| 属性 | 说明 | 示例值 |
| `message` | 传递的数据内容 | `{ user: 'Alice', action: 'login' }` |
| `targetOrigin` | 目标窗口的源地址 | `"https://example.com"` |
| `source` | 发送消息的窗口对象 | `window` |
| `origin` | 消息来源的协议、域名和端口 | `"https://sender.com"` |
| `data` | 接收到的消息数据 | `"Hello, world!"` |
五、注意事项
- 安全性：务必验证 `event.origin`，防止恶意攻击。
- 兼容性：现代浏览器普遍支持，但在旧版本中可能需要 polyfill。
- 性能：频繁调用可能导致性能问题，建议合理控制消息频率。
六、适用场景
| 场景 | 说明 |
| iframe通信 | 主页面与嵌套页面间数据交换 |
| 弹窗通信 | 弹出窗口与主窗口数据交互 |
| 多页面应用 | 不同页面间安全传递数据 |
| 单页应用跨组件通信 | 同一页面内不同组件间的非直接通信 |
通过合理使用 `PostMessage`，开发者可以在保证安全的前提下实现灵活的跨域通信，提升 Web 应用的交互体验与功能扩展能力。
