历史版本10 :在报表中调用自定义JS方法 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 问题描述编辑

两种情况：

1、报表嵌入在某个页面的 iframe 框架中，需要在报表模板中获取页面里面定义的方法；

2、报表嵌入在某个页面的 iframe 框架中，需要在报表模板中获取页面中另一个 iframe 里面的方法。
222

222

2. 解决方案编辑

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

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

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


3. 示例编辑

3.1 前提准备

如下 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 中也定义了一个方法 fun2：

<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>

将 page1.html/page2.html 保存在webapps\webroot\help目录下。


3.2 在模板中调用客户自己的 JavaScript 方法

如在 report.cpt 模板的参数界面增加一个按钮，按钮点击事件中，获取页面 page1 及 page2 中的方法，JavaScript 如下：

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

222
打开浏览器，输入http://localhost:8075/webroot/help/page1.html。即可看到上图所示的效果。