在报表中调用自定义JS方法- FineReport帮助文档 - 全面的报表使用教程和学习资料

1. 概述

1.1 问题描述

当报表嵌入在某个页面 iframe 框架中时，如何在获取主页面里定义的方法、如何获取主页面另外的内嵌 iframe 中的报表呢？即：

1）报表嵌入在某个页面的 iframe 框架中，报表模板中如何获取承载报表的 iframe 页面里定义的方法。

222

2）报表嵌入在某个页面的 iframe 框架中，报表模板中如何获取承载报表的 iframe 页中嵌入的另一个 iframe 里面的方法。
222

1.2 实现思路

首先通过 JavaScript 获取方法所在的对象，然后通过方法名调用。

1）中页面对于模板来说是父，因此可以通过 parent.window.fnname() 调用父页面的方法。

2）中可通过父页面获取另一个 iframe，再调用其中的方法：parent.window.getElementById("iframename").contentWindow.fnname()。

2. 示例

2.1 准备HTML页面

准备两个 HTML 页面 page1.html 和 page2.html，并保存在 %FR_HOME%\webapps\webroot\help 目录下。如下图所示：

如下 page1.html 中，通过 iframe 嵌入了一张 report 报表及 page2.html 页面，在 page1 中定义了方法 fun1。

<html>
  <head> 
    <title>page1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function fun1(){
alert("这是主页面中的方法！");
}
   </script>
  </head>
  <body>
<p>这是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>

如下 page2.html 中，在 page2 中定义了方法 fun 2。

<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("这是嵌在另一个iframe中页面里的方法！")
}
   </script>
  </head>
  
  <body>
    <P>这是page2！</p>
  </body>
</html>

2.2 准备模板

新建模板 report.cpt ，模板的参数界面增加一个按钮，按钮「点击」事件中，获取页面 page1 及 page2 中的方法。如下图所示：

JavaScript 代码如下：

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

2.3 效果预览

打开浏览器，输入 URL 访问 page1.html，URL 地址要根据 page1.html 所在的工程输入，如本地工程输入http://localhost:8075/webroot/help/page1.html，效果如 1.1 节预期效果所示。

已經是第一篇

下一篇：更新日誌索引

有幫助
沒幫助
只是瀏覽
圖片不清晰
用語看不懂
功能說明看不懂
操作說明太簡單
內容有錯誤

中文（简体） English 日本語

中文（繁體）

文檔回饋

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

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

不再提示

10s後關閉

在报表中调用自定义JS方法