vue中iframe子页面和父页面之间相互通信

最新推荐文章于 2025-06-17 16:17:29 发布

原创最新推荐文章于 2025-06-17 16:17:29 发布 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

在Vue项目中，iframe子页面与父页面通信通常遇到挑战。本文介绍了使用`postMessage`方法进行通信的解决方案。首先，由于window.parent.vm无法在纯HTML子页面中获取，作者放弃了此方法。接着尝试通过getElementById，但不被青睐。最终，作者详细阐述了`postMessage`的使用，指出需将消息发送给`window.parent`，并监听`message`事件以执行相应方法，实现了跨域通信。

vue中iframe子页面和父页面之间相互通信

问题

在实际的开发中遇到一个需求，就是iframe子页面需要调用父页面的方法，起初百度使用了window.parent.vm*来调用父页面的方法，后来发现在iframe的纯html页面中根本取不到vm，遂推测应该是两个vue工程页面之间的调用可以用这个；接着又使用了window.parent.getElementId(‘xxx’)，这种方法理论上来说应该是可行的，但是我懒且不喜欢这种调用方式，就没有深究，放弃了这种方法的尝试。所以找到了postMessage这种方法，感觉还不错，就选择了这个。

解决方法

postMessage的使用还是很简单的，也能够实现跨域间的通信，感觉很好用，下面就是使用方法：
发送端：

window.parent.postMessage(data, '*');

“*”代表所有的地址都能接收到信息，这个地方其实是目标路径，可以根据自己的实际路径进行更改；这里有一块需要注意的地方，在第一次使用的时候，我使用了window.postMessage，但不知道什么原因，接收不到信息，改为window.parent.postMessage之后就可以了；
接收端：

window.addEventListener('message', (ev) => {
        var data = ev.data;
	        //下面可以调用我们html页面js中的方法，使用传递的数据进 行操作了
	        console.log(data);
	}, false);