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 相关文章推荐
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
使用js获取地址栏中传递的值
Jul 02 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
javascript瀑布流式图片懒加载实例
Jun 28 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
js实现简单扫雷
Nov 27 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采集时被封ip的解决方法
2010/08/29 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
应届生骨科医生求职信
2013/10/31 职场文书
幼儿园招生广告
2014/03/19 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
2014年销售工作总结
2014/12/01 职场文书
2014企业年终工作总结
2014/12/23 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
python xlwt模块的使用解析
2021/04/13 Python