首页vue iframe 通信

vue iframe 通信

时间: 2023-11-08 10:01:17 浏览: 165

在Vue中，可以通过使用iframe的contentWindow.postMessage方法实现Vue组件和iframe之间的通信。具体步骤如下： 1. 在父组件中，给iframe添加一个id属性，方便后续获取iframe对象。 2. 在父组件的mounted钩子函数中，通过document.getElementById('iframeId')获取iframe对象。 3. 使用iframe对象的contentWindow.postMessage方法发送数据给子页面。 4. 在子页面的mounted钩子函数中，通过window.addEventListener('message', callback)监听message事件，获取父组件传递过来的数据。示例代码如下： ```vue <template> <div> <iframe id="parkIframe" style="width: 100%; height: 100%" src="index.html" frameborder="0"></iframe> </div> </template> <script> export default { mounted() { let iframeObj = document.getElementById('parkIframe'); iframeObj.contentWindow.postMessage('Hello from parent!', '*'); } } </script> ``` 子页面的代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Child Page</title> </head> <body> <script> window.addEventListener('message', function(event) { console.log('Received message from parent:', event.data); }); </script> </body> </html> ```

阅读全文