Layui实现主窗口和Iframe层参数传递


Posted in Javascript onNovember 14, 2019

这应该是我们在开发中经常用到的吧,主窗口和Iframe层之间传值实现我们各种需求,比如打开某条记录的详细数据….

主窗口向Iframe层传值:

//主窗口代码
    layer.open({
      type: 2,
      title: "标题",
      shade: 0.5,
      area: ['500px', '500px'],
      anim: 2,
      content: ['url'],
    success: function (layero, index) {
        var iframe = window['layui-layer-iframe' + index];//拿到iframe元素
        iframe.child(JSON.stringify(data))//向此iframe层方法 传递参数
      }
    });
      
      //iframe层代码
       
     <script>
     
       function funrec(obj) {
         //这样就把主窗体的值放到iframe层的隐藏控件了
         //你也可以直接拿到obj完成你的需求
         $("#hid_rec").val(obj);
          </script>

iframe层向主窗口传值就比较简单了

parent.$("#主窗口元素ID").val("需要传递的参数");

以上这篇Layui实现主窗口和Iframe层参数传递就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
juqery 学习之五 文档处理 插入
Feb 11 Javascript
js静态方法与实例方法分析
Jul 04 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 Javascript
layui 弹出层值回传解决方式
Nov 14 #Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 #Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 #Javascript
浅析Vue 防抖与节流的使用
Nov 14 #Javascript
微信小程序tabBar设置实例解析
Nov 14 #Javascript
layui清除radio的选中状态实例
Nov 14 #Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 #Javascript
You might like
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
python连接字符串的方法小结
2015/07/13 Python
Python 操作MySQL详解及实例
2017/04/30 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
浅谈python写入大量文件的问题
2018/11/09 Python
Python类的动态绑定实现原理
2020/03/21 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
篝火晚会主持词
2014/03/25 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
室内趣味活动方案
2014/08/24 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
vue 实现上传组件
2021/05/31 Vue.js
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技