1.1 问题描述

场景描述：在实际项目中做填报时，会遇到点击按钮跳转到子窗口填写详细信息，当填报完成，关闭子窗口时，希望能刷新父窗口，要如何设置才能实现子窗口关闭后刷新父页面呢？

注：360 浏览器极速模板不支持该效果

1.2 实现思路

在我们填报过程中，当我们链接到子报表时，通过填报设置里面的加载结束事件，就可以将之前的页面重载刷新。

我们会用到两个方法：

1）在子窗口退出的时候，通过 window.opener.location.reload() 刷新父窗口。

2） onunload 事件在用户退出页面时触发事件。 

将上述两种事件结合起来使用，可以触发该效果。

2.1 新建父页面

1）新建父页面，添加 ds1 数据集：SELECT * FROM userinfo。

设计界面如下：

2.2 新建填报子页面

1）填报子页面设计界面如下：

2）设置报表填报属性：

在子窗口的填报模板，点击模板>模板 Web 属性>填报页面设置，点击事件设置，添加加载结束事件。

注：是在被链接的模板上面加填报页面设置，加载结束事件。

添加 JS 代码：

window.onunload = function(){ this.opener.location.reload(); }

2.3 预览效果

保存模板，选择填报预览，实现效果下图所示：

注：经过测试，手机端和 H5 不支持该效果。

移动端可以参考此效果：[App]填报成功关闭当前页面并刷新父页面

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