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

编辑
  • 文档创建者:gxy120313
  • 浏览次数:9331次
  • 编辑次数:14次
  • 最近更新:Kevin-s 于 2019-06-22
  • 1. 描述

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



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

    2. 思路

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

    我们会用到两个方法:

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

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

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

    3. 操作步骤

    3.1 新建父页面

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

    设计界面如下:



    3.2 新建填报子页面

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


    2)设置报表填报属性:


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

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


    添加 JS 代码:

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

    4. 移动端预览

    4.1 PC 端预览效果

    保存模板,选择填报预览,实现效果如描述中所示。

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

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

    5. 已完成模板

    1)父页面

    模板效果在线查看请点击:JS 实现关闭子窗口时刷新父窗口(父).cpt

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\13-JS实现关闭子窗口时刷新父窗口(父).cpt

    点击下载模板

    2)子页面

    模板效果在线查看请点击:JS 实现关闭子窗口时刷新父窗口(子).cpt

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\13-JS实现关闭子窗口时刷新父窗口(子).cpt

    点击下载模板



    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]