最近项目中遇到一个与内嵌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页面之间的通信问题的更多相关文章

  1. 内嵌iframe页面在IOS下会受内部元素影响自动撑开的问题

    IOS下的webview页面,内嵌iframe元素,将其样式指定为宽高100%: .iframe { width: %; height: %; } 在安卓下运行均无问题,但是在IOS下会出现异常. 具 ...

  2. 用vue做app内嵌页遇到的坑

    公司要求用vue做一个微信端的网站,其中还包含一些app的内嵌页.开始的时候没想那么多,就直接用vue-cli搭了一个单页的vue项目,可随着项目越做越大,页面越来越多,问题就开始暴露出来了. 众所周 ...

  3. easyui内嵌iframe问题解决

    项目中使用easyui的tab页,每个tab页均内嵌iframe,现在要在tab页中控制新增一个同级别的tab页,记录如下: 首先是main.html主页面: <div class=" ...

  4. 第03篇. 标准Web项目Jetty9内嵌API简单启动

    一直以来,想改变一些自己早已经习惯的事情. 到了一定年龄,便要学会寡言,每一句话都要有用,有重量. 喜怒不形于色,大事淡然,有自己的底线. --胖先生 昨天,简单的说了一下关于Jetty9的配置,大家 ...

  5. 小程序中webview内嵌h5页面

    小程序内嵌h5页面跳转小程序指定页面,  需要引用  JSSDK:   <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2 ...

  6. ios应用内嵌h5页面数据自动变色识别为手机号码的解决方法——手机号码拨号禁用IOS手机页面数字自动识别为手机号

    异常如下: ios应用内嵌h5页面,本来是设置了白色的数字,两三秒之后会自动变为黑色,然后点击的时候就会弹出是否拨号的提示: 解决方法: 添加如下meta标签,即可解决: <meta name= ...

  7. APP中内嵌H5页面为什么不能下载?

    在APP中内嵌H5页面,若页面上存在下载链接,没有任何反应,为什么呢? 原因是app中内嵌的H5页面是WebView解析的,什么是WebView呢? 在Android手机中内置了一款高性能webkit ...

  8. 让微信小程序页面之间的通信不在变得困难

    一个开始 小程序开发者总会碰到各种页面之间的通信问题,实现方式也五花八门,比如... 场景还原 首先这是一个电商小程序. 有这样一个需求: 首页某个地方要展示购物车商品数量. 当我在其他页面加购了商品 ...

  9. 弹出窗口内嵌iframe 框口自适应

    说一下,弹出窗口还有内嵌一个iframe 这种模式应该是不科学的,但是公司项目里面就偏偏用到了,它这高低还不能只适应,所以我痛苦的日子来了 分析一下: 首先window.showDialog 方法的时 ...

  10. Spring Boot项目的内嵌容器

    一.关于容器 刚才开始使用spring boot的开发者会有种很直观的感觉,servlet容器“不见了”.之前开发web项目,都是把程序写完后部署到servlet容器(比如Tomcat),但是使用sp ...

随机推荐

  1. c++学习笔记(入门)

    1 struct和class的区别 struct成员变量(成员函数)的访问属性缺省的情况下默认为public. class成员变量(成员函数)的访问属性缺省的情况下默认为private. 2 初始化列 ...

  2. Spring Boot整合log4j实战(一):排除自带依赖、日志重定向、测试类验证

    〇.参考资料 1.springboot整合log4j全过程详解 https://blog.csdn.net/m0_60845963/article/details/123307232 2.Spring ...

  3. Ubuntu 22.04 搭建K8s集群

    目录 1. 虚拟机基础配置 配置静态ip 设置主机名 设置hosts 安装ssh 2. Ubuntu系统设置 禁用swap 修改内核参数 3. 安装containerd 4. 安装Kubernetes ...

  4. [数据结构]哈希拉链法化解冲突+ASL计算

    看这篇就好(自用,别骂我) 摘自博客园 存疑:学校考试空节点算不算查找次数???

  5. Django聚合函数与分组查询

    目录 一:聚合查询 1.聚合函数作用 2.聚合函数查询关键字: 3.聚合函数 4.聚合函数使用 二:分组查询 1.分组查询 2.返回值 3.分组查询关键字 4.分组查询特点 5总结: 三:分组使用 1 ...

  6. 简单易用的监控告警系统 | HertzBeat 在 Rainbond 上的使用分享

    在现有的监控告警体系中 Prometheus + AlertManger + Grafana 一直是主流,但对于中小团队或个人来说,这种体系显的较为复杂.而 HertzBeat 能让中小团队或个人很快 ...

  7. P1024 [NOI2001] 食物链【种类并查集】

    题意 P1024 简化题意:给定 \(n\) 和 \(k(n\leqslant5\times10^4,k\leqslant10^5)\) ,表示有 \(n\) 个动物, \(k\) 个描述,其中: \ ...

  8. [OpenCV实战]33 使用OpenCV进行Hough变换

    目录 1 什么是霍夫变换 1.1 应用霍夫变换以检测图像中的线条 1.2 累加器 1.3 线条检测 1.4 圆环的检测 2 代码 3 参考 1 什么是霍夫变换 霍夫变换是用于检测图像中的简单形状(诸如 ...

  9. vue 中安装并使用echart

    本文为博主原创,转载请注明出处: 1.安装echart 依赖: 安装命令: npm install echarts --save 在vscode 的终端窗口进行执行,如图所示: 执行完之后,查看 项目 ...

  10. Flutter异常监控 - 叁 | 从bugsnag源码学习如何追溯异常产生路径

    如果觉得文章对你有帮助,点赞.收藏.关注.评论,一键四连支持,你的支持就是我创作最大的动力. ️ 本文原创听蝉 公众号:码里特别有禅 欢迎关注原创技术文章第一时间推送  ️ 前言 没错,继Flutte ...