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 相关文章推荐
你真的了解JavaScript吗?
Feb 24 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
AngularJS实现路由实例
Feb 12 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
JSX在render函数中的应用详解
Sep 04 Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 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操作MongoDB的技术总结
2013/06/02 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
Python程序设计入门(1)基本语法简介
2014/06/13 Python
MySQL最常见的操作语句小结
2015/05/07 Python
详解Python多线程
2016/11/14 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
详解python里的命名规范
2018/07/16 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
Python 实现一个简单的web服务器
2021/01/03 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
美发店5.1活动方案
2014/01/24 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
离职证明标准格式
2014/09/15 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python