vue中iframe嵌套页面父子组件互相通信
//父传子页面
<iframe id="mainIframe" name="mainIframe" ref="iframe" :src="URL" frameborder="0" scrolling="auto" style="height: 100%;"></iframe><script>export default {data() {return {URL:'http://10.1.1.28:8081/#/',嵌套页面的地址obj:{a:1,b:2}};},mounted(){this.parent()},methods:{parent(){const mapFrame = this.$refs['iframe'];const iframeWin = mapFrame.contentWindow;iframeWin.postMessage(this.obj,'*');}}
}</script>
//irame'页面进行接收‘’
mounted(){
window.addEventListener("message", function (e) {console.log(e.data,'iframe接收父页面数据')
})
}
//iframe向父组件通信,子传父
sone(){this.val={c:1,d:2}window.parent.postMessage(this.val, "*");
}//父页面接收iframe
mounted(){window.addEventListener('message', (messageEvent) => { console.log(messageEvent.data)})
}
vue中iframe嵌套页面父子组件互相通信相关推荐
- 关于vue中iframe嵌套页面的适配(大屏可视化)
this.$nextTick(() => { const iframe = this.$refs.iframeWarp //获取dom const iframed = iframe[0] ifr ...
- vue中用iframe嵌套页面,点击返回实现真正的退回上一步功能
vue项目中需要嵌套第三方的页面,但是第三方页面中的网页没有返回按钮,如图所示:此为页面b,页面a为跳到b页面的前一个页面. 点击iframe嵌套页面跳转的第二个页面 要实现不管进入多少层iframe ...
- vue动态配置嵌套页面(含iframe嵌套)可实现白天夜间皮肤切换
引用地址:vue动态配置嵌套页面(含iframe嵌套)可实现白天夜间皮肤切换 - 长空雁叫霜晨月 - 博客园 项目预览地址:https://volodya-01.github.io/vue2.0_t ...
- 浏览器 调用 vue 组件_父子组件的通信
在前端vue框架中,我们常常使用多个页面组成一个组件来创建项目.每个组件都有其自己的功能,基于组件的体系结构使开发和维护应用程序变得容易.在开发过程中,您可能会遇到需要与其他组件共享数据的情况.在本文 ...
- 实现iframe嵌套页面通信
实现iframe嵌套页面通信 在项目中通过iframe标签嵌入其他网页时,该如何iframe页面进行通信呢?小菜鸡在这里简单记录一下~ 1.父组件获取子组件: (注:父组件是当前项目页面,子组件是if ...
- h5 iframe嵌套页面_汇总IOS下奇葩BUG以及iframe嵌套页面带来的一些困扰
做H5开发,安卓和IOS的兼容问题经常会困扰我们,尤其是跟第三方平台合作,用到iframe嵌入式应用,令很多Web前端开发的童鞋脑壳疼,相信大家也入了不少坑,且踩且珍惜吧,呵呵^_^.今天抽时间整理一 ...
- 前端Docker部署 https服务以及使用 iframe嵌套页面遇到的问题
中心思想:先部署 http服务,再部署 https服务转发到 http服务上 (如果 http和 https服务部署在同一台服务器上,可共用一个 docker容器同时部署,见 3) 前端Docker微 ...
- 【Vue父子组件间通信】
Vue父子组件间通信 父子组件通信 父传子 (props) 子传父 (自定义事件) 完整代码 效果 父子组件通信 父传子 (props) (1)在父组件中使用子组件时,给子组件一个自定义属性,这个属性 ...
- TP超链接无法下载问题解决 hrome浏览器默认禁止iframe嵌套页面下载文件
var urlshow="{:U('Grant/download')}&grt_id="+row['grt_id']; let link = document.create ...
最新文章
- 计算机二级理工类报哪个,计算机二级考哪一科目,毕业后找工作会对科目有要求吗?还是说不管什么科目有证就行了?...
- 作为一个Linux/Unix程序员有哪些要求
- python求向量函数的雅可比矩阵_在python Numpy中求向量和矩阵的范数实例
- mybatis_user_guide(5) 动态 SQL
- android 删除模拟器,android – 如何从avd设备中删除脱机模拟器?
- Nginx平滑添加模块
- python画图时常用的颜色——color=‘ ’
- 软件工程 第4版张海藩 pdf_2019年第4期软件工程造价师培训课程圆满结束
- 【神经网络算法入门】详细推导全连接神经网络算法及反向传播算法+Python实现代码
- 图神经网络/GCN 入门
- 和老外聊天、发邮件常用英语缩写(超实用)
- 坚持十年博客写作,不忘初心,方得始终
- Fibonacci Additions (区间加优化)
- Nape的回调系统 nape.callbacks
- 【AHK】在Obsidian中以选定日期生成链接
- 【数据库实验】实验四 基于嵌入SQL的综合应用编程(基于QSqlTableModel实现)
- PyQt5使用笔记(一) 处理excel文件获取页眉页脚信息 2020.03.14
- linux开发板ftp,用ftp从linux上下载文件到开发板的方法
- 数据分析常用分析方法
- u盘正常接入后计算机无法看到,能识别U盘但显示不出来的解决办法【详解】
热门文章
- GNN手写字体识别java_深度之眼Paper带读笔记GNN.09.GGNN
- monkey 测试 ANR 问题 整理分析
- 关于PCM音频重采样思路及注意事项(频率变换和通道数变换(单通道转双通道))
- 关于elementui的table固定高度出现的表格高度有空缺
- 【转贴】对《高质量程序设计指南--C++/C第二版》的探讨
- java发现城市_java实现简单注册选择所在城市
- 【matlab】几个混沌系统时间序列数据的Matlab程序(chen、logistic、Lorenz、rossrossler)
- 《人工智能及其应用》课程笔记(四)第4章 非经典推理
- python查看excel编码格式_[Python]实现处理读写xlsx xls excel文件格式(含中文处理方法)...
- 月嫂APP开发可以实现哪些功能?