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 相关文章推荐
css图片自适应大小
Nov 28 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 Javascript
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 闭包特性在实际应用中的问题
2009/10/30 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
js不是基础的基础
2006/12/24 Javascript
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
兼容ie和firefox js关闭代码
2008/12/11 Javascript
JQuery jsonp 使用示例代码
2009/08/12 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
Python collections模块实例讲解
2014/04/07 Python
python sys.argv[]用法实例详解
2018/05/25 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
Python封装原理与实现方法详解
2018/08/28 Python
python tkinter界面居中显示的方法
2018/10/11 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
Django框架安装方法图文详解
2019/11/04 Python
如何基于Python实现自动扫雷
2020/01/06 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
优秀护士事迹材料
2014/12/25 职场文书
2015年教研工作总结
2015/05/23 职场文书
2016新年问候语大全
2015/11/11 职场文书