使用 postMessage API怎么实现
时间: 2023-10-18 20:28:14 浏览: 45
使用 postMessage API 可以在两个页面之间安全地传递数据。具体实现步骤如下:
1. 在发送消息的页面中,使用 postMessage 方法发送消息:
```javascript
var data = { message: 'Hello world!' };
var targetWindow = window.parent; // 如果是在 iframe 中,可以使用 window.parent 获取父窗口
targetWindow.postMessage(data, 'http://example.com'); // 发送消息到指定的窗口
```
2. 在接收消息的页面中,监听 message 事件,处理接收到的消息:
```javascript
window.addEventListener('message', function (event) {
if (event.origin !== 'http://example.com') { // 判断消息来源
return;
}
var data = event.data; // 获取传递过来的数据
console.log(data.message); // 输出消息内容
});
```
在这个例子中,我们向由 `http://example.com` 所在的页面发送了一条消息,并指定了消息的接收窗口。在接收消息的页面中,我们监听了 message 事件,并判断消息来源是否为 `http://example.com`,然后获取传递过来的数据,并进行处理。
需要注意的是,使用 postMessage 时需要注意数据的安全性,避免出现安全漏洞。可以在发送消息时指定接收窗口的 origin(源),在接收消息时进行校验。同时,建议在消息中添加一些标识符,以便接收方能够识别消息的类型和内容。