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

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之后就可以了；
接收端：