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

本文实例讲述了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框架的程序设计有所帮助。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,060评论 3 119
  • 贫穷,是怎样一种体验? 对父亲来说,是手中抽着的劣质香烟,是中年人头上不该有的白色发线,是宽厚却满身伤痕的肩…… ...
    蒋小志jxz阅读 4,079评论 8 12
  • 阳艳影暗蓝天看, 树闪草亮俏花现。 迷藏欢声耳旁来, 端午佳节斯人念。
    翱蓝阅读 2,649评论 0 1
  • 为什么诺基亚斥资81亿美元收购Navteq,而谷歌却青睐以色列小公司Waze? 为什么只有13名员工的Instag...
    鹿酱Monroe阅读 3,332评论 0 5
  • 我站在十字路口 看来路脚步弯弯 望前方迷雾重重 身边车水马龙 耳边呼啸是风 我挪不动脚步 手中空空如也 心底有泪落...
    小花一朵朵阅读 2,286评论 2 6

友情链接更多精彩内容