Iframe跨域加载皕杰报表

一、问题:

有时候客户会把报表应用和用户应用服务器分隔开,放到两个web服务器中,这时候如果直接用户应用服务器根据报表servelt方式加载报表,iframe的内容是跨域的获取不到它的高度和宽度。如果想实现报表内容很大,并且想让iframe不显示滚动条、自适应拉伸,就实现不了。

二、方案:

1)在报表应用中创建一个jsp,这个jsp中iframe根据servelt方式加载报表,然后再创建一个iframe具体代码如下:

<iframe id=”iframeA” name=”iframeA” src=”" width=”0″ height=”0″ style=”display:none;” ></iframe>

<script type=”text/javascript”>

function sethash(){

       var params_tbl = document.getElementById(‘params_tbl’);//servelt加载报表的iframe

       hashH=params_tbl.contentWindow.document.body.scrollHeight+20;

       hashW=params_tbl.contentWindow.document.body.scrollWidth+20;

       urlC = “http://192.168.1.188:8080/report/b.jsp”; //设置iframeA的src,这个src是指向用户应用服务器的中间件jsp的

       document.getElementById(“iframeA”).src=urlC+”?height=”+hashH+”&width=”+hashW; //将高度、宽度作为参数传递

}

window.onload=sethash;

</script>

2) 在用户应用服务器上创建1个jsp,其中这个jsp是加载报表应用上的jsp,其中有一个写一个js方法是设置这个iframe的高度和宽度的。

<div id=”rpt_div”>

<iframe width=”100%” height=”100%” id=”params_tbl” name=”params_tbl”

src=”http://192.168.1.112:8080/report/a.jsp” frameborder=”no” border=”0px” scrolling=”no” ></iframe>

</div>

<script language=”javascript”>

function setSize(width,height){

var rpt_div = document.getElementById(‘rpt_div’);

rpt_div.style.height=height;

rpt_div.style.width=width;

}

</script>

3)在用户应用服务器上再创建1个jsp,这个jsp作为中间件,获取报表应用中jsp的高度和宽度。具体代码:

<%@page contentType=”text/html; charset=gbk”%>

<%

String encode = “GBK”;

request.setCharacterEncoding(encode);

String height = request.getParameter(“height”);

String width = request.getParameter(“width”);

%>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=gbk”>

<script>

function  test() {

var width = document.getElementById(‘width’).value;

var height = document.getElementById(‘height’).value;

parent.parent.setSize(width,height);

}

</script>

</head>

<body onload=”test()” >

<input type=”hidden” value=”<%=width %>” id=”width” name=”width” />

<input type=”hidden” value=”<%=height %>” id=”height” name=”height” />

</body>

</html>

这样用户应用服务器,就可以iframe自适应显示报表了。