博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
LayUI之layer关闭刷新父界面
阅读量:6646 次
发布时间:2019-06-25

本文共 1356 字,大约阅读时间需要 4 分钟。

hot3.png

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);

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

转载于:https://my.oschina.net/u/3477605/blog/1815878

你可能感兴趣的文章
jasypt-spring-boot
查看>>
(诊断)为GitHub添加SSH key时出现“Could not open a connection to your authentication agent”错误的应对方案(转)...
查看>>
彼得原理
查看>>
30分钟让你了解MongoDB基本操作(转)
查看>>
用户交互程序
查看>>
Python学习【第17篇】:网络编程之粘包
查看>>
容器内部安装scp,拷贝到外部物理机
查看>>
微信js分享朋友圈(一)
查看>>
【原】centos6.5下cdh4.6 Oozie安装
查看>>
redis学习及实践3---Jedis、JedisPool、Jedis分布式实例介绍
查看>>
mobiscroll的例子
查看>>
浏览器存储页面
查看>>
WebApi接口返回值不困惑:返回值类型详解
查看>>
Windows终端屏幕显示库Public Domain Curses(PDCurses)使用
查看>>
【建站经验】 一个成熟的大型网站系统架构演化之路
查看>>
【RAID】raid1 raid2 raid5 raid6 raid10的优缺点和做各自raid需要几块硬盘
查看>>
oracle excute immediate 单引号转义
查看>>
数组相关知识
查看>>
1设计模式---工厂模式。
查看>>
HDU-1573 X问题(中国剩余定理)
查看>>