1. 概述编辑
1.1 问题描述
场景描述:在实际项目中做填报时,会遇到点击按钮跳转到子窗口填写详细信息,当填报完成,关闭子窗口时,希望能刷新父窗口,要如何设置才能实现子窗口关闭后刷新父页面呢?
注:360 浏览器极速模板不支持该效果
1.2 实现思路
在我们填报过程中,当我们链接到子报表时,通过填报设置里面的加载结束事件,就可以将之前的页面重载刷新。
我们会用到两个方法:
1)在子窗口退出的时候,通过 window.opener.location.reload() 刷新父窗口。
2) onunload 事件在用户退出页面时触发事件。
将上述两种事件结合起来使用,可以触发该效果。
2. 示例编辑
2.1 新建父页面
1)新建父页面,添加 ds1 数据集:SELECT * FROM userinfo。
设计界面如下:
2.2 新建填报子页面
1)填报子页面设计界面如下:
2)设置报表填报属性:
在子窗口的填报模板,点击模板>模板 Web 属性>填报页面设置,点击事件设置,添加加载结束事件。
注:是在被链接的模板上面加填报页面设置,加载结束事件。
添加 JS 代码:
window.onunload = function(){ this.opener.location.reload(); }
2.3 预览效果
保存模板,选择填报预览,实现效果下图所示:
注:经过测试,手机端和 H5 不支持该效果。
移动端可以参考此效果:[App]填报成功关闭当前页面并刷新父页面
3. 模板下载编辑
1)父页面
模板效果在线查看请点击:JS 实现关闭子窗口时刷新父窗口(父).cpt
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\13-JS实现关闭子窗口时刷新父窗口(父).cpt
点击下载模板:13-JS实现关闭子窗口时刷新父窗口(父).cpt
2)子页面
模板效果在线查看请点击:JS 实现关闭子窗口时刷新父窗口(子).cpt
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\13-JS实现关闭子窗口时刷新父窗口(子).cpt
点击下载模板:13-JS实现关闭子窗口时刷新父窗口(子).cpt