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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
vue实现商城秒杀倒计时功能
Dec 12 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 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更新mysql后获取改变行数的方法
2014/12/25 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
js 文件引入实现代码
2010/04/23 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
给实习单位的感谢信
2014/02/01 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
2014年药剂科工作总结
2014/11/26 职场文书