vue与iframe之间的信息交互的实现
更新时间：2020年04月08日 11:44:52 作者：_王骁凯
这篇文章主要介绍了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，为了体验像同步的和实现多通信互不干扰】
具体什么是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信息交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue获取参数的几种方式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue中下载文件的方法,通过实例代码讲解了下载后端返回文件和下载本地文件，本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-11-11
laravel+vue组合的项目中引入ueditor方式(打包成组件形式)
今天小编就为大家分享一篇laravel+vue组合的项目中引入ueditor方式(打包成组件形式)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
轮播图是前端很常用的一个网页特效，几乎所有的网站或多或少都会用到这个特效。下面这篇文章主要给大家介绍了关于利用Vue实现移动端图片轮播组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2017-08-08
本文主要介绍了Vue+echart 展示后端获取的数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这些年写前端vue时经常碰到虚拟DOM这个单词，但都是听到就算了，左耳进右耳出，知道有这么个东西就完了，因为感觉也没有影响我实现公司的产品业务逻辑。今天在这里想花点时间探讨下虚拟DOM相关的知识，给自己补补课2022-10-10
这篇文章主要介绍了vue 自定义icon的图标的步骤，文中大概给大家分为两步骤，通过实例图文相结合给大家介绍的非常详细,需要的朋友可以参考下2021-08-08
最近我开发的公司的竞赛网站被发现在IE11下排行榜无数据，但是在其他浏览器没问题，我然后打开控制台一看，发现有问题，纠结了半天才捣腾好，下面小编把方案分享处理，供大家选择2019-07-07
循环使用v-for指令,v-for指令需要以site in sites形式的特殊语法,sites是源数据数组并且site是数组元素迭代的别名,下面这篇文章主要给大家介绍了关于Vue中v-for列表循环的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了pc端vue的ui组件库的实现方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
最新评论