layer实现关闭弹出层刷新父界面功能详解


Posted in Javascript onNovember 15, 2017

本文实例讲述了layer实现关闭弹出层刷新父界面功能。分享给大家供大家参考,具体如下:

layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。

最近一个项目采用的是hui前端框架,他的弹出层就是用的layer插件,对于弹出层,有一个操作体验大家都知道,就是关闭弹出层,需要刷新父页面。开始写的时候,我陷入了自己的误区,在弹出层处理成功之后,我调用的是:

var index = parent.layer.getFrameIndex(window.name);
parent.location.href=url;
parent.layer.close(index);

这个地方是这样写也没错,但是如果这么写,它就只能被一个地方调用了,如果有多个地方调用的话,它不能返回原地址,而是重定向到新的url地址上去了。而刚好,在我的项目中间,某一个弹出层被两个地方调用了,所以很明显这种方案就不合适了,需要优化。百度了一下,找到如下两种优化方案:

方案一:

在layer弹出层中调用父界面重新加载函数

window.parent.location.reload();
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);

方案二:

调用layer插件的end回调方法:

end - 层销毁后触发的回调

类型:Function,默认:null

无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数。

父窗口打开layer弹出框时,添加end回调

function openLayer() {
  //iframe层
    parent.layer.open({
      type: 2,
      title: '修改',
      shadeClose: false, //点击遮罩关闭
      shade: 0.8,
      area: ['30%', '45%'],
      maxmin: true,
      closeBtn: 1,
      content: [url, 'yes'], //iframe的url,yes是否有滚动条
      end: function () {
        location.reload();
      }
});

layer弹出框处理完成之后,就不需要调用其他刷新操作函数了,直接关闭就行了

var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);

相比较而言,第一种方案会更佳,因为在操作逻辑上,手动关闭弹出框,应该不触发刷新操作,只有当弹出框的处理逻辑执行成功后,调用函数关闭弹出框才触发父界面刷新操作,基于这个逻辑,应该选择方案一。方案二,不管怎样都会刷新页面,实际上无端的增加了服务器的处理压力。

方案二:可以解决子页面处理后的结果发送给子页面的父页面的问题。

对于layer.js出现回调关闭父类的弹出层时,之前的表单的submit失效的问题:

如何解决:网上有很多,有的是转为ajax的请求,在数据传输完再关闭父类的弹出层:

下面是关闭父弹出层的办法:

var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.close(index); // 关闭layer

采用ajax这样可以,但是我做的是支付,要弹出页面才能支付,不能转换为ajax,怎么帮?后面我老大说:“你就不能晚点执行关闭吗”?这是一个想法试了一下就好了。

附上代码:

$("#myForm").submit();
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
setTimeout(function () {
  parent.layer.close(index); // 关闭layer
},500);

我还需要在关闭父类窗口后再打开一个窗口,则怎么解决,后面发现layer.js留有一个好的方式,那就是调用父窗口的方法,这个不受子窗口的影响,通过:parent.父类方法名(参数)这样就可以了,在父窗口中再调用layer.js的弹出就好了。

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

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

Javascript 相关文章推荐
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 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
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 #Javascript
You might like
DC动漫人物排行
2020/03/03 欧美动漫
PHP+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
Snoopy类使用小例子
2008/04/15 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
smarty中常用方法实例总结
2015/08/07 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
Javascript异步编程async实现过程详解
2020/04/02 Javascript
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
python字典序问题实例
2014/09/26 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
Python过滤列表用法实例分析
2016/04/29 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
面向对象编程的优势是什么
2015/12/17 面试题
酒店管理毕业生自荐信
2013/10/24 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
电影开国大典观后感
2015/06/04 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python