相思资源网 Design By www.200059.com

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

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

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

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

第二张图

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

第三张图

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

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,为了体验像同步的和实现多通信互不干扰】

具体什么是postmessage :point_right:MDN写的很详细https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

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

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

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

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

postmessage

标签:
vue,iframe,信息交互,vue,iframe,交互

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“vue与iframe之间的信息交互的实现”

暂无vue与iframe之间的信息交互的实现的评论...