最近项目中遇到一个与内嵌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. DHorse操作手册

    在介绍DHorse的操作之前,我们先来看一下发布一个系统的流程是什么样的. 发布系统的流程 我们以一个Springboot系统为例,来说明一下发布流程. 1.首先从代码仓库下载代码,比如Gitlab: ...

  2. python-名称空间与作用域

    名称空间与作用域 (1)名称空间(namespaces) 用来存放名字的地方是对栈区的划分 有了名称空间,就可在栈区中放相同的名字 1.1.内置名称空间 存放的名字:是Python解释器内置的名字 & ...

  3. Springboot 整合 SpringCache 使用 Redis 作为缓存

    一直以来对缓存都是一知半解,从没有正经的接触并使用一次,今天腾出时间研究一下缓存技术,开发环境为OpenJDK17与SpringBoot2.7.5 SpringCache基础概念 接口介绍 首先看看S ...

  4. 什么是JS?JS的用途?

    一.JavaScript是什么?它有什么作用? JavaScript是一种运行在客户端的脚本语言,简称JS,属于解释性语言.它是一行翻译执行完以后再进行下一行,代码不进行预编译. JavaScript ...

  5. 互斥锁 线程理论 GIL全局解释器锁 死锁现象 信号量 event事件 进程池与线程池 协程实现并发

    目录 互斥锁 multiprocessing Lock类 锁的种类 线程理论 进程和线程对比 开线程的两种方式(类似进程) 方式1 使用Thread()创建线程对象 方式2 重写Thread类run方 ...

  6. MySQL的安装与配置,图形化软件安装,以及IDEA上的配置操作

    1. MySQL安装详细教程 注意:本次安装例为随笔发布时最新的8.0.31版本教程,由于您所希望安装的版本不同可能会导致一些问题,请谅解. 进入官网下载界面 https://www.mysql.co ...

  7. C#关于委托的一些事,开发日志

    ----- 委托是什么------ 其实委托事件很好理解,就当成是c语言中的函数指针或者是回调函数,或者说换种理解方式,信号和槽?触发器和接收器?总之就是一个地方调用了这个函数,那么在另一个地方也会调 ...

  8. Chaos 测试下的若干 NebulaGraph Raft 问题分析

    Raft 是一种广泛使用的分布式共识算法.NebulaGraph 底层采用 Raft 算法实现 metad 和 storaged 的分布式功能.Raft 算法使 NebulaGraph 中的 meta ...

  9. JavaScript:对象:如何读取、添加、删除对象的属性?

    如何给对象添加属性? 直接对象名.属性名去添加属性 直接对象名[属性名]去添加属性,此时属性名得是字符串类型,可以直接引号,也可以用变量名 如何读取对象的属性值? 这个操作,和添加属性是一样的,即用点 ...

  10. 【c#】分享一个简易的基于时间轮调度的延迟任务实现

    在很多.net开发体系中开发者在面对调度作业需求的时候一般会选择三方开源成熟的作业调度框架来满足业务需求,比如Hangfire.Quartz.NET这样的框架.但是有些时候可能我们只是需要一个简易的延 ...