JS实现关闭子窗口时刷新父窗口

  • 文档创建者:gxy120313
  • 编辑次数:15次
  • 最近更新:Kevin-s 于 2019-12-06
  • 1. 概述

    1.1 问题描述

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

    222

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

    1.2 实现思路

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

    我们会用到两个方法:

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

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

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

    2. 示例

    2.1 新建父页面

    1)新建父页面,添加 ds1 数据集SELECT * FROM userinfo

    设计界面如下:

    222


    2.2 新建填报子页面

    1)填报子页面设计界面如下:

    222

    2)设置报表填报属性:

    image.png

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

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

    image.png

    添加 JS 代码:

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

    2.3 预览效果

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

    222

    注:经过测试,手机端和 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



    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!