vue与iframe之间的信息交互的实现

2020-04-08 11:40:30 作者：_王骁凯

这篇文章主要介绍了vue与iframe之间的信息交互的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

说一下我的使用场景：在vue中使用百度地图，需要使用离线地图

先上代码然后细细品第一张图

第二张图

第三张图

1.首先iframe 引入你要嵌套的地址 2

.通过vue中给出的ref 来获取 ifarme的DOM元素

如图中的 this.iframeWin = this.$refs.iframe.contentWindow 【拿到iframe的window对象】

3.vue如何向iframe内传送信息可以通过H5新属性 postmessage

注释：【postMessage是有点类似于UDP协议，就像短信，是异步的，你发信息过去，但是没有返回值的，只能内部处理完成以后再通过postMessage向外部发送一个消息，外部监听message为了让postMessage像TCP，为了体验像同步的和实现多通信互不干扰】

4.通过第二张图的 cmd来区别这条message的目的

{
 cmd: '命令',
 params: {
 '键1': '值1',
 '键2': '值2'
 }
}

5.第三张图就是接收父页面发来的信息可以通过判断语句写相应的逻辑

6.第一张图中不难看出可以监听到 iframe中的发来的信息

postmessage

到此这篇关于vue与iframe之间的信息交互的实现的文章就介绍到这了,更多相关vue iframe信息交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！