layer是一款近年来备受青睐的web弹层组件,她具有全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操做体验。
最近一个项目采用的是hui前端框架,他的弹出层就是用的layer插件,对于弹出层,有一个操做体验你们都知道,就是关闭弹出层,须要刷新父页面。开始写的时候,我陷入了本身的误区,在弹出层处理成功以后,我调用的是:前端
var index = parent.layer.getFrameIndex(window.name); parent.location.href=url; parent.layer.close(index);
这个地方是这样写也没错,可是若是这么写,它就只能被一个地方调用了,若是有多个地方调用的话,它不能返回原地址,而是重定向到新的url地址上去了。而恰好,在个人项目中间,某一个弹出层被两个地方调用了,因此很明显这种方案就不合适了,须要优化。百度了一下,找到以下两种优化方案:
方案一:
在layer弹出层中调用父界面从新加载函数web
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);
相比较而言,第一种方案会更佳,由于在操做逻辑上,手动关闭弹出框,应该不触发刷新操做,只有当弹出框的处理逻辑执行成功后,调用函数关闭弹出框才触发父界面刷新操做,基于这个逻辑,应该选择方案一。方案二,无论怎样都会刷新页面,实际上无故的增长了服务器的处理压力。函数