vue页面嵌套iframe页面传值、调用、首次传值获取不到、有缓存数据问题
时间:2022-09-23
本文章向大家介绍vue页面嵌套iframe页面传值、调用、首次传值获取不到、有缓存数据问题,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在父组件中创建iframe
<!-- iframe -->
<!-- -->
<el-dialog :visible.sync="dialogVisible" width="500px" @close="closeDialog" v-if="dialogVisible">
<iframe id="iframe" ref="iframe" src="/static/test.html" width="100%" height="260px"></iframe>
</el-dialog>
通过v-if的创建销毁dom,可以解决iframe页面缓存问题
父传子传值
// 发起会话 openif(infodata) { this.dialogVisible = true; var that = this; this.$nextTick(() => {
//获取iframe元素 const iframe = document.getElementById("iframe"); iframe.onload = function (e) { //通过.contentWindow.postMessage(data,"*")向iframe子组件传值 iframe.contentWindow.postMessage({ // 暂时先写死 'stationId': '69999', // 写死 'loginId': '17999', // 坐席工号 // 'dest': infodata.user_mobile, // 手机号+0 'dest': "13455955635", // 手机号+0 'username': infodata.ter_user_name ? infodata.ter_user_name : ""// 客户姓名 }, "*"); } }); },
iframe.onload用来解决父传子首次传值获取不到数据的问题
子组件接收传值
window.addEventListener("message", message => { console.log(message );
})
vue父页面调用ifarme子页面方法
// 监听用户关闭对话框,执行签出操作 closeDialog() { const iframe = document.getElementById("iframe"); iframe.contentWindow.jtapi_Loginout("17999", "69999"); },
原文地址:https://www.cnblogs.com/426jie/p/16720353.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP快速排序算法实现的原理及代码详解
- 从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
- keras实现VGG16 CIFAR10数据集方式
- PyTorch: Softmax多分类实战操作
- 为什么称python为胶水语言
- opencv 图像礼帽和图像黑帽的实现
- python文件及目录操作代码汇总
- 使用pyplot.matshow()函数添加绘图标题
- 如何卸载python插件
- Keras实现支持masking的Flatten层代码
- 用opencv给图片换背景色的示例代码
- 解决Keras 自定义层时遇到版本的问题
- Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
- Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
- python实现PDF中表格转化为Excel的方法