使用postMessage传值
时间: 2023-11-04 16:50:33 浏览: 41
postMessage 是 JavaScript 中的一个方法,可以在不同的窗口或框架之间传递消息。你可以使用它来实现跨域通信或在不同的页面之间传递数据。
在使用 postMessage 传值时,需要在发送消息的窗口或框架中调用 postMessage 方法,将要传递的数据和目标窗口的 origin(源)信息传递给它。在接收消息的窗口或框架中,需要监听 message 事件,并在事件处理程序中获取传递的数据。
以下是一个简单的示例代码:
发送消息的窗口:
```javascript
const targetWindow = window.opener;
const data = { message: 'Hello world!' };
const targetOrigin = 'https://example.com';
targetWindow.postMessage(data, targetOrigin);
```
接收消息的窗口:
```javascript
window.addEventListener('message', event => {
if (event.origin !== 'https://example.com') {
return;
}
const data = event.data;
console.log(data.message); // 输出:Hello world!
});
```
在这个示例中,我们在一个窗口中调用 postMessage 方法发送了一个包含数据的消息。接收消息的窗口监听了 message 事件,并在事件处理程序中获取了传递的数据。需要注意的是,在接收消息的窗口中,我们需要检查消息的来源是否是我们信任的源,以防止恶意代码利用 postMessage 进行攻击。