vue iframe 之间通信
时间: 2023-11-04 13:53:03 浏览: 47
在 Vue 中,当你需要在不同的 iframe 之间进行通信时,可以使用 HTML5 提供的 postMessage() 方法。该方法可以在两个不同的窗口之间传递消息。
下面是一个示例,展示了如何在 Vue 组件中使用 postMessage() 方法进行 iframe 之间的通信:
在父页面中,可以使用以下代码来发送消息:
```
const targetOrigin = 'http://example.com'; // iframe 的源
const iframe = document.getElementById('frameId'); // 获取 iframe 元素
iframe.contentWindow.postMessage('Hello from parent', targetOrigin);
```
在子页面中,可以使用以下代码来监听消息:
```
window.addEventListener('message', event => {
// 判断消息来源是否合法
if (event.origin !== 'http://example.com') {
return;
}
// 处理消息
console.log('Received message from parent:', event.data);
});
```
在 Vue 组件中,可以将这些代码封装成方法,以便在需要时调用。例如,在父组件中,可以定义一个 sendMessage() 方法:
```
methods: {
sendMessage(message) {
const targetOrigin = 'http://example.com'; // iframe 的源
const iframe = document.getElementById('frameId'); // 获取 iframe 元素
iframe.contentWindow.postMessage(message, targetOrigin);
}
}
```
在子组件中,可以定义一个监听消息的方法:
```
mounted() {
window.addEventListener('message', event => {
// 判断消息来源是否合法
if (event.origin !== 'http://example.com') {
return;
}
// 处理消息
console.log('Received message from parent:', event.data);
});
}
```
当需要发送消息时,可以在父组件中调用 sendMessage() 方法;当需要接收消息时,可以在子组件中监听 message 事件。