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 相关文章推荐
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
js实现删除json中指定的元素
Sep 22 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
PHP自动生成月历代码
2006/10/09 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
php实现的简单日志写入函数
2015/03/31 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
Pytorch to(device)用法
2020/01/08 Python
Python定义一个函数的方法
2020/06/15 Python
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
c/c++某大公司的两道笔试题
2014/02/02 面试题
智乐游戏测试笔试题
2014/05/21 面试题
一套软件开发工程师笔试题
2015/05/18 面试题
优秀员工自荐信范文
2013/10/05 职场文书
外贸业务员的岗位职责
2013/11/23 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
党员自我剖析材料
2014/08/31 职场文书
法人授权委托书范本
2014/09/17 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书