JS Refresh iframe by a Button in Another iframe

  • Last update:December 16, 2020
  • I. Description

    A dashboard contains two iframes A and B, and the two iframes display two different reports respectively. How to click the button in the iframe A to refresh the content in iframe B?

    The desired effect is as follows (the left is iframe A while the right is iframe B):

    1606382995230580.gif

    II. Ideas

    Use window.parent to get the iframe of the parent template, and use the method reload() of the iframe widget to refresh iframe.

    Note: Need to install the plugin iframe Widget.

    III. Examples

    3.1 Create a parent template

    Create a dashboard, and drag in two iframes, as shown in the following figure:

    1606383025908632.png


    3.2 Create sub-template A

    1) Create a normal report A.cpt. Select cell A1, in the property panel on the right, select the button widget, and set the button name to: refresh parent iframe B, as shown in the following figure:

    1606383049997283.png

    2) Add a Click event:

    1606383081151662.png

     The JS code is as follows:

    window.parent._g().getWidgetByName('rHIframe1').reload(); //rHIframe1 is the name of the iframe that needs to be refreshed in the parent template

     Or use the following code:

    var parent = window.parent;
    var iframe = parent.document.getElementById('RHIFRAME1');//RHIFRAME1 is the capitalization of the name of the iframe that needs to be refreshed in the dashboard
    iframe.contentWindow.location.reload(true);

     3) Save the sub-template A.cpt.


    3.3 Create sub-template B

    1) Create a new normal report B.cpt, and insert the formula in cell A1: ROUND5(RAND() * 50,0), as shown in the figure below:

    1606383116687520.png

    2) Save the sub-template B.cpt.


    3.4 Set iframes in the parent template

    1) Open the parent template parent.frm, select iframe rHIframe0, set the template path and parameters, select A.cpt as the template path, add a parameter named op, and set the parameter value to a string: write:

    1606383150968860.png

    2) Select iframe rHIframe1, and set the template path as B.cpt:

    1606383183747989.png

    3) Save the parent template parent.frm.

    IV. Preview the Effect

    Save the templates parent.frm, A.cpt and B.cpt in the folder reportlets. Preview parent.frm, and the final effect is as shown at the beginning.

    Note: Mobile terminal is not supported.

    V. Completed Templates

    Attachment List


    Theme: FineVis Data Visualization
    • Helpful
    • Not helpful
    • Only read

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    10s後關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy