关于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 ...
随机推荐
- Vue 双向绑定数据已经更新,但是视图更新:
使用ElementUI做动态增减表单项的时候,发现数据刷新后视图未更新 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() shift() ...
- python3小技巧总结(实时更新)
1.列表解析 如果一个想将一个列表中的大于0的数字过滤,一般可能会用到lambd结合filter,或者就是直接遍历,不过最好的解决办法是这样: b = [1,0,-1,-2] a = [i for i ...
- 【Scala】常见题目中Scala的使用
一.简单输出 BC2:打印一辆小飞机 object Main{ def main(args: Array[String]) { println(" ** ") println(&q ...
- (四) 一文搞懂 JMM - 内存模型
4.JMM - 内存模型 1.JMM内存模型 JMM与happen-before 1.可见性问题产生原因 下图为x86架构下CPU缓存的布局,即在一个CPU 4核下,L1.L2.L3三级缓存与主内存的 ...
- Vue DevUI v1.4 版本发布:从体验、效率、质量三个方面做了全方位的优化🎉
2022年9月1日,我们正式宣布 Vue DevUI 组件库发布 v1.0 版本. Vue DevUI 1.0 正式发布 经过100多天的持续迭代,我们正式发布 v1.4.0 版本,共新增: 11位贡 ...
- css样式表,选择器,伪类选择器
CSS定义 CSS:Cascading Style Sheet(层叠样式表) 选择器 { 属性名: 属性值; } CSS样式表 (1)三种样式表使用 ·1> 内联样式 <div style ...
- STL vector常用API
1.容器:序列容器(时间决定).关联式容器(容器中的数据有一定规则) 2.迭代器:通过迭代器寻找.遍历容器中的数据 vetor的使用:数据遍历与输出 #define _CRT_SECURE_NO_WA ...
- 【转载】EXCEL VBA 工作簿(表)合并拆分
一.合并工作簿 Sub 合并工作簿() Application.ScreenUpdating = False myfile = Dir(ThisWorkbook.Path & & ...
- [编程基础] Python数据生成库Faker总结
Python Faker教程展示了如何使用Faker软件包在Python中生成伪数据.我们使用joke2k/faker包. 1 介绍 Faker是一个生成假数据的Python库.伪数据通常用于测试或用 ...
- [OpenCV实战]21 使用OpenCV的Eigenface
目录 1 PCA 1.1 方差是什么 1.2 什么是PCA 1.3 什么是矩阵的特征向量和特征值? 1.4 如何计算PCA 2 什么是EigenFaces? 2.1 将图像作为向量 2.2 如何计算如 ...