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 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
求解开jscript.encode代码的asp函数
Feb 28 Javascript
JS之小练习代码
Oct 12 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
js导入导出excel(实例代码)
Nov 25 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
javascript实现回到顶部特效
May 06 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
Webpack的Loader和Plugin的区别
Nov 09 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
据说是雅虎的一份PHP面试题附答案
2009/01/07 PHP
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
js实现表格筛选功能
2017/01/18 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
angular 服务随记小结
2019/05/06 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
Python装饰器decorator用法实例
2014/11/10 Python
详解Python网络爬虫功能的基本写法
2016/01/28 Python
python数据结构之链表详解
2017/09/12 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
PyQt5实现拖放功能
2018/04/25 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
“学雷锋活动月”总结
2014/03/09 职场文书
会计岗位职责模板
2014/03/12 职场文书
文艺晚会主持词
2014/03/24 职场文书
机关会计岗位职责
2014/04/08 职场文书
家长给老师的感谢信
2015/01/20 职场文书
小马王观后感
2015/06/11 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
nginx 配置指令之location使用详解
2022/05/25 Servers
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS