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


Posted in Javascript onApril 08, 2020

说一下我的使用场景:在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信息交互内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
input 高级限制级用法
Mar 26 Javascript
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
js/jQuery对象互转(快速操作dom元素)
Feb 04 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
React Router基础使用
Jan 17 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
JS实现可控制的进度条
Mar 25 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 #Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 #Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 #Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 #Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 #Javascript
JS async 函数的含义和用法实例总结
Apr 08 #Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 #Javascript
You might like
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
2019/08/16 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
本科生个人求职自荐信
2013/09/26 职场文书
本科毕业生的求职信范文
2013/11/20 职场文书
大学活动邀请函
2014/01/28 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
交通志愿者活动总结
2014/06/27 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
老乡会致辞
2015/07/28 职场文书
解除租赁合同协议书
2016/03/21 职场文书
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis