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框架的程序设计有所帮助。
- 使用Hystrix提高系统可用性
- Spring Security笔记:解决CsrfFilter与Rest服务Post方式的矛盾
- GitHub新开放项目FoolNLTK:一个便捷的中文处理工具包
- hessian学习
- 制作WordPress侧边栏“博客统计”小工具并集成在主题中的方法
- Struts2、Spring MVC4 框架下的ajax统一异常处理
- 前11月网游收入1341亿元同比增超两成 你贡献了多少?
- struts2: config-browser-plugin 与 convention-plugin 学习
- 千万级规模高性能、高并发的网络架构经验分享
- UE4新手之编程指南
- redis 学习笔记(5)-Spring与Jedis的集成
- Linq to SQL 查询Tips
- SQLite 预写式日志
- java调用.net asmx / wcf
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- django查询今天,昨天,一周,分组统计月,年
- 关于 z-index,你可能一直存在误区
- Java浮点数机制及所存在的问题
- SAP UI5和React的页面渲染性能比较
- SAP CDS view自学教程之一:如何测试基于SAP CDS view自动生成的OData服务
- SAP CDS view自学教程之二:当SAP CDS view被激活时,背后发生了什么
- SAP Fiori Elements原理介绍之类型为Value Help的Smart Field工作原理
- 万字详述 MySQL ProxySQL
- 在SAP WebClient UI里使用AJAX进行异步数据读取
- Angular Component TypeScript代码和最后转换生成的JavaScript代码比较
- 如何使用Angular FormBuilder
- Angular HTML template的解析位置
- Angular FormBuilder的工作原理
- Angular HTTPClient的使用方法
- nodejs错误:PayloadTooLargeError: request entity too large