先来说说什么是postMessage:
postMessage
是h5引入的API,postMessage
方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案。
场景:
今天在vue项目中本来想使用eventBus
(中央事件总线)进行组件间通信的。但是发现$emit
后,另外一个组件没有收到消息。我检查了一下,发现其中一个组件是被另外一个组件使用iframe嵌套的,而 $emit
无法突破iframe传递消息。
解决办法:
查了一下发现可以使用h5的postMessage
先把消息传递到iframe
的父组件,再由父组件使用eventBus
把消息通知另外一个组件
代码示例:
被A嵌套的a组件:
window.parent.postMessage({ event: 'update' }, '*')
嵌套a的父组件A:
...
<iframe :src="src"></iframe>
...
import eventBus from '../eventBus.js'
...
data(){
return{
src:'a组件的路由地址'
}
},
mounted() {
window.addEventListener('message', (e) => {
if (e.data.event === 'update') {
eventBus.$emit('update');
}
});
},
...
另外一个B组件:
import eventBus from '../eventBus.js'
...
mounted() {
eventBus.$on('update', this.updateList)
},
beforeDestroy() {
eventBus.$off('update')
},
methods:{
updateList(){
...
}
}
...
参考文献:
EventBus from iframe to parent
前端爬坑日记之vue内嵌iframe并跨域通信