关于vue项目和内嵌iframe页面之间的通信问题
最近项目中遇到一个与内嵌iframe页面之间通信的问题,起初与原生之间通信很简单,没想到过与vue项目通信的问题,霎时间一脸懵*啊,百度了一下,原来是那么简单,这里记录下以供下次参考
//vue页面 向 内嵌iframe传递事件 // vue页面代码
let frame = document.getElementById('iframeId'); // 或者用vue语法 let frame = this.$refs.iframeId
frame.contentWindow.postMessage(object,'*'); // object为传送的对象 *号为接收数据的项目地址 // iframe页面
window.addEventListener('message',function(event){
·// 传送的数据在event.data里面
})
// iframe页面向vue项目页面传递事件 // iframe页面
window.parent.postMessage(object,'*'); // object为需要传送的数据对象 *号为接收数据的项目url地址 //主页面
window.addEventListener('message',,function(event){ // 数据在event.data对象中
})
关于vue项目和内嵌iframe页面之间的通信问题的更多相关文章
- 内嵌iframe页面在IOS下会受内部元素影响自动撑开的问题
IOS下的webview页面,内嵌iframe元素,将其样式指定为宽高100%: .iframe { width: %; height: %; } 在安卓下运行均无问题,但是在IOS下会出现异常. 具 ...
- 用vue做app内嵌页遇到的坑
公司要求用vue做一个微信端的网站,其中还包含一些app的内嵌页.开始的时候没想那么多,就直接用vue-cli搭了一个单页的vue项目,可随着项目越做越大,页面越来越多,问题就开始暴露出来了. 众所周 ...
- easyui内嵌iframe问题解决
项目中使用easyui的tab页,每个tab页均内嵌iframe,现在要在tab页中控制新增一个同级别的tab页,记录如下: 首先是main.html主页面: <div class=" ...
- 第03篇. 标准Web项目Jetty9内嵌API简单启动
一直以来,想改变一些自己早已经习惯的事情. 到了一定年龄,便要学会寡言,每一句话都要有用,有重量. 喜怒不形于色,大事淡然,有自己的底线. --胖先生 昨天,简单的说了一下关于Jetty9的配置,大家 ...
- 小程序中webview内嵌h5页面
小程序内嵌h5页面跳转小程序指定页面, 需要引用 JSSDK: <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2 ...
- ios应用内嵌h5页面数据自动变色识别为手机号码的解决方法——手机号码拨号禁用IOS手机页面数字自动识别为手机号
异常如下: ios应用内嵌h5页面,本来是设置了白色的数字,两三秒之后会自动变为黑色,然后点击的时候就会弹出是否拨号的提示: 解决方法: 添加如下meta标签,即可解决: <meta name= ...
- APP中内嵌H5页面为什么不能下载?
在APP中内嵌H5页面,若页面上存在下载链接,没有任何反应,为什么呢? 原因是app中内嵌的H5页面是WebView解析的,什么是WebView呢? 在Android手机中内置了一款高性能webkit ...
- 让微信小程序页面之间的通信不在变得困难
一个开始 小程序开发者总会碰到各种页面之间的通信问题,实现方式也五花八门,比如... 场景还原 首先这是一个电商小程序. 有这样一个需求: 首页某个地方要展示购物车商品数量. 当我在其他页面加购了商品 ...
- 弹出窗口内嵌iframe 框口自适应
说一下,弹出窗口还有内嵌一个iframe 这种模式应该是不科学的,但是公司项目里面就偏偏用到了,它这高低还不能只适应,所以我痛苦的日子来了 分析一下: 首先window.showDialog 方法的时 ...
- Spring Boot项目的内嵌容器
一.关于容器 刚才开始使用spring boot的开发者会有种很直观的感觉,servlet容器“不见了”.之前开发web项目,都是把程序写完后部署到servlet容器(比如Tomcat),但是使用sp ...
随机推荐
- 关于解决Failed on cp file to /system - Cross-device link 报错
前言 在adb shell中移动 android_server时候遇到了这个报错 解决办法 采用 cp 命令代替 mv 命令
- Selenium4+Python3系列(十) - Page Object设计模式
前言 Page Object(PO)模式,是Selenium实战中最为流行,并且被自动化测试同学所熟悉和推崇的一种设计模式之一.在设计测试时,把页面元素定位和元素操作方法按照页面抽象出来,分离成一定的 ...
- 长度最小子数组-LeetCode209 滑动窗口
力扣:https://leetcode.cn/problems/minimum-size-subarray-sum/ 题目 给定一个含有 n 个正整数的数组和一个正整数 target .找出该数组中满 ...
- 爬虫之xpath插件下载与安装
目录 简介: 下载xpath文件 打开chrome浏览器 点击右上角小圆点 更多工具.阔展程序 拖拽xpath插件放到阔展程序 如果失效,再次拖拽 关闭浏览器重新打开 按ctrl+shift+x 出现 ...
- 配置 DosBox
配置 DosBox DosBox 在高分辨的屏幕上窗口很小. 修改分辨率 Win7 及以上配置文件位于{system drive}:\Users\{username}\AppData\Local\DO ...
- 彻底理解Python中的闭包和装饰器(下)
上篇讲了Python中的闭包,本篇要讲的装饰器就是闭包的一个重要应用. 如果你还不知道什么是闭包,猛戳这里阅读:彻底理解Python中的闭包和装饰器(上) 什么是装饰器 装饰器的作用是在不修改函数定义 ...
- 【数据结构与算法】希尔排序 python和c++实现
算法思路 每一次:固定间隔把数据分组,每一组进行排序 每次比上次选取更小的间隔分组,再每组排序,直到间隔为1 代码 c++:(越看越不明白了,后看) int gap = length;//length ...
- 聚焦技术,锐意创新,GaussDB给世界一个更优选择
摘要:从整个行业应用层面来看,现在,数据库的国产化时代已经到来. 本文分享自华为云社区<聚焦技术,锐意创新,GaussDB给世界一个更优选择>,作者: GaussDB数据库. 今天,以&q ...
- JavaScript冒泡排序+Vue可视化冒泡动画
冒泡排序(Bubble Sort)算是前端最简单的算法,也是最经典的排序算法了.网上JavaScript版本的冒泡排序很多,今天用Vue实现一个动态的可视化冒泡排序. 01.JavaScript冒泡排 ...
- JavaScript:七大基础数据类型:字符串string
在JS中,字符串类型的数据,有三种表达方式,但是无一例外都是需要引号扩起来的: 单引号'hello' 双引号"hello" 反引号`hello` 注意: 因为JS没有字符类型,这一 ...