layui框架中layer父子页面交互的方法分析


Posted in Javascript onNovember 15, 2017

本文实例讲述了layui框架中layer父子页面交互的方法。分享给大家供大家参考,具体如下:

layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/

可以从官网上下载最新版本。

还可点击此处本站下载

当layer以iframe层的方式弹出新的窗口(子页面),如何在子页面中访问父页面的元素和函数。

1、访问父页面元素值

var parentId=parent.$("#id").val();//访问父页面元素值

2、访问父页面方法

var parentMethodValue=parent.getMethodValue();//访问父页面方法

3、如何关闭弹出的子页面窗口

var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.close(index);//关闭弹出的子页面窗口

4、如何从子页面执行刷新父页面操作

parent.location.reload(); // 父页面刷新

附:layer弹出多个iframe找到父页面的方法

父页面:

function aa(){
    var index = parent.layer.getFrameIndex(window.name);
    var iframeName = 'layui-layer-iframe'+index;
    openDialog1('选择XXX', '${ctx}/*****,'800px', '500px',iframeName);
}
function openDialog1(title,url,width,height,target){
    top.layer.open({
      type: 2,
      area: [width, height],
      title: title,
      maxmin: true, //开启最大化最小化按钮
      content: url ,
      btn: ['确定', '关闭'],
      yes: function(index, layero){
         var body = top.layer.getChildFrame('body', index);
         var iframeWin = layero.find('iframe')[0]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
         var inputForm = body.find('#inputForm');
         var top_iframe;
         if(target){
           top_iframe = target;//如果指定了iframe,则在改frame中跳转
         }else{
           top_iframe = top.getActiveTab().attr("name");//获取当前active的tab的iframe
         }
         inputForm.attr("target",top_iframe);//表单提交成功后,从服务器返回的url在当前tab中展示
         if(iframeWin.contentWindow.doSubmit(top_iframe) ){
           top.layer.close(index);//关闭对话框。
           top.window[iframeName].frames.location.reload();//刷新父亲
         }
     },
     cancel: function(index){
      }
  });
}
//子页面回调方法
function addRecord(name,chainName){
  alert(name);
}

子页面

function doSubmit(iframeName) {
    var sel=$("tbody tr td input.i-checks:checked");
    var size = sel.size();
    if(size==0){
      top.layer.alert('请至少选择一条数据!', {icon: 0, title:'警告'});
      return false;
    }else{
      for(var i=0;i<size;i++){
        top.window[iframeName].addRecord(sel[i].name,sel[i].value);
      }
      return true;
    }
}

另:layui完整源码可点击此处本站下载

希望本文所述对大家基于layui框架的程序设计有所帮助。

Javascript 相关文章推荐
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
layer实现关闭弹出层刷新父界面功能详解
Nov 15 #Javascript
layui.js实现的表单验证功能示例
Nov 15 #Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 #Javascript
基于jQuery实现定位导航位置效果
Nov 15 #jQuery
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 #Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 #Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 #Javascript
You might like
PHP生成HTML静态页面实例代码
2008/08/31 PHP
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
python实现定时播放mp3
2015/03/29 Python
Python决策树分类算法学习
2017/12/22 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
Python多进程原理与用法分析
2018/08/21 Python
transform python环境快速配置方法
2018/09/27 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
python通过cython加密代码
2020/12/11 Python
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
单位在职证明范本
2014/01/09 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
农村面貌改造提升实施方案
2014/03/18 职场文书
大学生社团活动总结
2014/04/26 职场文书
出租车拒载检讨书
2015/01/28 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
MySQL 聚合函数排序
2021/07/16 MySQL