**postMessage详解**
`postMessage` 是Web API中一个非常重要的功能，用于在不同源（跨域）的浏览器窗口之间进行通信。这个API是HTML5引入的，解决了之前跨域安全策略限制下，如iframe、弹窗、多窗口之间无法直接通信的问题。`postMessage` 的核心在于它允许一个文档或窗口向其他任何窗口发送消息，接收方可以监听`message`事件来获取发送的消息。
### 1. 使用方法
`postMessage` 接受两个参数：要传递的数据和目标窗口的引用。例如：
```javascript
// 发送方
window.postMessage(messageData, targetOrigin);
```
- `messageData`: 任意类型的数据，可以是字符串、对象、数组等，但最终会被转化为字符串。
- `targetOrigin`: 一个字符串，指定接收消息的窗口的源（协议+域名+端口）。可以是通配符"*"，表示任何源，也可以是具体地址，如"http://example.com"，只允许该地址的窗口接收消息。
### 2. 接收消息
接收方需要监听`message`事件，设置事件处理函数来处理接收到的消息：
```javascript
// 接收方
window.addEventListener('message', function(event) {
// 检查event.origin确保消息来自预期的源
if (event.origin !== 'http://example.com') return;
// event.data 即为接收到的数据
console.log('接收到的消息:', event.data);
// 可以通过event.source访问到发送消息的窗口
});
```
### 3. 安全性与跨域策略
`postMessage` 在设计时充分考虑了安全性，它允许接收方验证消息的来源，避免了恶意的跨域攻击。接收方在`message`事件处理函数中，通常会检查`event.origin`以确保消息来自可信的源。同时，`event.source`用于确认发送消息的窗口。
### 4. 应用场景
- **iframe通信**：当一个页面包含了一个来自不同源的iframe时，`postMessage`可以用来在主页面和iframe之间交换数据。
- **窗口通信**：打开的新窗口或弹窗可以通过`postMessage`向父窗口或者兄弟窗口发送消息。
- **Web Workers**：Web Workers虽非窗口，但也可以通过`postMessage`与主线程通信。
- **Web应用程序与插件/ActiveX对象**：当Web应用需要与非同源的插件或ActiveX对象交互时，`postMessage`提供了可能。
### 5. 示例
#### iframe通信Demo
```html
<!DOCTYPE html>
<html>
<head>
<script>
function sendMessage() {
const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello from parent!', 'http://example.com');
}
</script>
</head>
<body>
<button onclick="sendMessage()">向iframe发送消息</button>
<iframe id="myIframe" src="http://example.com/child.html"></iframe>
</body>
</html>
```
在`child.html`中添加监听器：
```html
<!DOCTYPE html>
<html>
<head>
<script>
window.addEventListener('message', function(event) {
if (event.origin !== 'http://yourdomain.com') return;
console.log('接收到的消息:', event.data);
});
</script>
</head>
<body>
<p>我是子页面</p>
</body>
</html>
```
以上就是`postMessage`的基本使用及应用场景。在实际开发中，开发者可以根据需求，利用`postMessage`实现复杂的跨域通信解决方案。在处理跨域问题时，`postMessage`提供了一种安全、灵活的方式，使得Web应用可以更加智能和互动。
