js postmessage 使用
时间: 2023-09-29 10:02:16 浏览: 53
在 JavaScript 中,`PostMessage` 用于在不同的窗口或框架之间进行跨域通信。它可以向另一个窗口发送数据,并在该窗口中触发一个 `message` 事件。另一个窗口可以使用 `addEventListener` 方法监听 `message` 事件,并在回调函数中处理接收到的数据。
`postMessage` 的语法如下:
```javascript
otherWindow.postMessage(message, targetOrigin, [transfer]);
```
- `otherWindow`:指定接收消息的窗口对象。
- `message`:要发送的数据,可以是任意类型的数据。
- `targetOrigin`:指定接收消息的窗口的源,用于过滤不需要的消息。可以是 URL 字符串、`"*"`(表示接受所有源的消息)或者空字符串(表示不指定源)。建议尽量指定正确的源,以提高安全性。
- `transfer`:可选参数,用于传递二进制数据,例如 ArrayBuffer、Blob、File 等。
以下是一个例子,使用 `postMessage` 向另一个窗口发送消息:
```javascript
// 发送消息
window.parent.postMessage({ name: '张三', age: 20 }, 'http://example.com');
// 接收消息
window.addEventListener('message', function(event) {
if (event.origin === 'http://example.com') {
console.log(event.data); // { name: '李四', age: 25 }
}
});
```
在这个例子中,当我们调用 `window.parent.postMessage` 向父窗口发送消息时,我们指定了消息的目标源为 `http://example.com`。在另一个窗口中,我们使用 `window.addEventListener` 监听 `message` 事件,并在回调函数中处理接收到的数据。在回调函数中,我们首先使用 `event.origin` 来检查消息的源是否合法,然后使用 `event.data` 来获取接收到的数据。