关于vue项目和内嵌iframe页面之间的通信问题
2024-09-18 16:53:12
最近项目中遇到一个与内嵌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对象中
})
最新文章
- Bestcoder#5 1002
- 疑难问题解决备忘录(2)——ubuntu12.04分配swap
- POJ 1995 快速幂模板
- Android处理Bitmap的一些方法
- SQL Server 表和索引存储结构
- 配置 RAILS FOR JRUBY1.7.4
- 禁止 favicon.ico 请求
- MVC 5 + EF6 完整教程15 -- 使用DI进行解耦
- ZOJ-3933-Team Formation【二分图最佳匹配】【KM】
- 牛客网linux试题-错误整理-20170914
- Django ValidationError中的单下划线
- 在github上fork项目如何同步并解决冲突
- c/c++ lambda 表达式 介绍
- Java-idea-mybatis plugin插件使用
- Laravel 5.5 FormRequest 自定义错误消息 postman调试时X-Requested-With设为XMLHttpRequest
- ARCGIS 出图显示not map metafile into memory.Not enough memory
- File类的常用方法和练习
- LOJ2324. 「清华集训 2017」小 Y 和二叉树【贪心】【DP】【思维】【好】
- 网络采集软件核心技术剖析系列(5)---将任意博主的全部博文下载到内存中并通过Webbrower显示(将之前的内容综合到一起)
- 后勤LO采购数据源增强
热门文章
- nestjs搭建HTTP与WebSocket服务
- 一张VR图像帧的生命周期
- linux 使用ACR122U-A9设备读写M1卡
- Task02:艺术画笔见乾坤
- windows安装grunt时提示不是内部或外部命令解决方案
- 18V转5V,15V转5V的LDO和DC芯片方案
- Thrift RPC添加access log
- go-carbon 1.5.3 版本发布, 修复已知 bug 和新增俄罗斯语翻译文件
- [攻防世界][江苏工匠杯]unseping
- pymysql.err.ProgrammingError: (1146, ";Table 'autoplatform.webcasestepinfo' doesn't exist";