layer实现关闭弹出层刷新父界面功能详解
方案一:
在layer弹出层中调用父界面重新加载函数
1 2 3 | window.parent.location.reload(); varindex = parent.layer.getFrameIndex(window.name); parent.layer.close(index); |
---|
方案二:
调用layer插件的end回调方法:
end – 层销毁后触发的回调
类型:Function,默认:null
无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数。
父窗口打开layer弹出框时,添加end回调
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | functionopenLayer() { //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弹出框处理完成之后,就不需要调用其他刷新操作函数了,直接关闭就行了
1 2 | varindex = parent.layer.getFrameIndex(window.name); parent.layer.close(index); |
---|
相比较而言,第一种方案会更佳,因为在操作逻辑上,手动关闭弹出框,应该不触发刷新操作,只有当弹出框的处理逻辑执行成功后,调用函数关闭弹出框才触发父界面刷新操作,基于这个逻辑,应该选择方案一。方案二,不管怎样都会刷新页面,实际上无端的增加了服务器的处理压力。
方案二:可以解决子页面处理后的结果发送给子页面的父页面的问题。
对于layer.js出现回调关闭父类的弹出层时,之前的表单的submit失效的问题:
如何解决:网上有很多,有的是转为ajax的请求,在数据传输完再关闭父类的弹出层:
下面是关闭父弹出层的办法:
1 2 | varindex = parent.layer.getFrameIndex(window.name);//获取窗口索引 parent.layer.close(index);// 关闭layer |
---|
采用ajax这样可以,但是我做的是支付,要弹出页面才能支付,不能转换为ajax,怎么帮?后面我老大说:“你就不能晚点执行关闭吗”?这是一个想法试了一下就好了。
附上代码:
1 2 3 4 5 | $(“#myForm”).submit(); varindex = parent.layer.getFrameIndex(window.name);//获取窗口索引 setTimeout(function() { parent.layer.close(index);// 关闭layer },500); |
---|
我还需要在关闭父类窗口后再打开一个窗口,则怎么解决,后面发现layer.js留有一个好的方式,那就是调用父窗口的方法,这个不受子窗口的影响,通过:parent.父类方法名(参数)这样就可以了,在父窗口中再调用layer.js的弹出就好了。
未经允许不得转载:肥猫博客 » layer实现关闭弹出层刷新父界面功能详解
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的