JS Call webpage methods in the report

  • Last update:  2020-12-17
  • I. Overview

    1.1 Problem

    Two situations:

    1) The report is embedded in the iframe of a page, and the method defined in the page needs to be obtained in the report template;

    2) The report is embedded in the iframe of a page, and the method in the other iframe of the page needs to be obtained in the report template.

    2020-11-19_16-08-34.png

    2020-11-19_16-10-01.png


    1.2 Solution

    First obtain the object where the method is located through JavaScript, and then call it through the method name:

    In case 1, the page is the parent to the template, so the parent page method can be called through parent.window.fnname() ;  

    In case 2, get another iframe through the parent page, and then call the method: parent.window.getElementById("iframename").contentWindow.fnname().

    II. Example

    2.1 Page design

    In the following page1.html, a report.cpt and page2.html page are embedded through an iframe; the method fun1 is defined in page1:

    <html>
      <head> 
        <title>page1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
    function fun1(){
    alert("This is the method in the main page!");
    }
       </script>
      </head>
      <body>
    <p>This is page1</p>
    <iframe src="/webroot/help/page2.html" name="page2" id="page2" ></iframe>
    <iframe src="/webroot/decision/view/report?viewlet=report.cpt" name="report" scrolling="auto"></iframe>
      </body>
    </html>

    There is also a method fun2 defined in page2.html:

    <html>
      <head> 
        <title>page2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
    function fun2(){
    var name = alert("This is the method embedded in the page in another iframe!")
    }
       </script>
      </head>
      <body>
       <P>This is page2! </p>
      </body>
    </html>

    The page1.html , page2.html should be saved under webapps\webroot\help directory. 


    2.2 Call the JavaScript method in the template

    For example, add a button to the parameter pane of the report.cpt template. In the button click event, get the methods in page1 and page2. The JavaScript is as follows:

    var page1 = parent.window;
    page1.fun1();
    var page2 = page1.document.getElementById("page2").contentWindow;
    page2.fun2();

    2020-11-19_15-53-06.png

    report.cpt should be saved under webapps\webroot\WEB-INF\reportlets


    2.3 Preview effect

    Open the browser and enter http://localhost:8075/webroot/help/page1.html . You can see the effect shown in the figure at the beginning.

    III. Download file

    Attachment List


    Theme: Secondary Development
    • 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