iframe框架自适应报表高度

编辑
文档创建者:文档助手1 (67727 )     浏览次数:10531次     编辑次数:18次     最近更新:susie 于 2019-04-09     

目录:

1.问题描述编辑

将报表集成至Web页面中时,报表往往只是作为页面的某一部分嵌入在一个框架中如iframe中显示出来。

由于报表每页数据是不定的,在最后一页可能只有几条数据,此时iframe框架将留有大片的空白,造成空间的浪费也使得界面不美观。

这个时候我们就会希望,要是iframe框架大小能够根据报表页面的内容自动调整高度或宽度,如下图效果:

222

当页面记录数较少,此时iframe框架高度变小,如下图:

222



2. 实现思路编辑

主要思路如下通过网页加载结束事件监听报表页面的高度,进而设置所在iframe框架的高度,即可实现iframe框架高度根据报表内容来自适应了。

3. 实现步骤编辑

3.1 实现上一页、下一页功能
3.2 添加监听
我们需要获取服务器返回给浏览器的页面,因此需要添加一个监听看浏览器是否已经将结果加载完毕。添加监听的方法为contentPane.on("afterload",function(){});
注:若存在跨域调用iframe的时候,会被浏览器禁止,需要进行中转,具体操作方法请参照JS跨域调用
3.3 设置iframe框架高度
一旦发现浏览器已经将结果加载完毕,我们便可以获取结果如最后一页数据有多少行,遍历每行获得高度并进行累计,将最终需要的高度(像素px为单位)赋给框架。
for(var i = 0;i<tr.length;i++){ //由于报表页面加载完成之后,可能会将单元格也在加载成一个tr,会导致重复计算,这里通过条件判断来获取行的tr if(tr[i].id.substring(0,1)=="r"){ height = height + tr[i].offsetHeight; } } reportFrame.height = height;
注:由于报表在计算解析成html的时候,可能会将单元格也解析成为一个tr,所以需要遍历所有tr判断一下单元格是否被解析为一个tr。
实现如上效果,请看下面完整的页面代码:
3.4 页面auto.html完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Demo</title> </head> <script type="text/javascript"> // 由于gotoNextPage()等方法调用后,后台服务器返回结果需要一定的时间,而我们需要获得返回结果中的行 // 因此添加监听,contentPane.on("afterload",function(){}):当选择页加载完毕后调用setframeHeight方法获取行数及高度从而调整框架大小 window.onload=function(){ var contentPane = document.getElementById('reportFrame').contentWindow.contentPane; contentPane.on("afterload",function(){ setframeHeight(); }); } function setframeHeight(){ var reportFrame = document.getElementById('reportFrame'); // 获得页面中的所有行 var tr = reportFrame.contentWindow.document.getElementsByTagName("tr"); //为了避免报表加载结束后出现滚动条现象,这里将报表容器的overflow属性设置为hidden //由于在报表容器属性的设置只能在报表计算之后,所以用setTimeout来设置延迟执行时间,如果数据过多,请按照具体情况修改延迟时间 setTimeout(function(){document.getElementById('reportFrame').contentWindow.document.getElementById("content-container").style.overflow="hidden";},10) // 由于报表页面还存在页边距,因此框架高度是大于所有行累计的高度的,这里赋一个初始值以表示边距的大小 var height = 30; for(var i = 0;i<tr.length;i++){ //由于报表页面加载完成之后,可能会将单元格也在加载成一个tr,会导致重复计算,这里通过条件判断来获取行的tr if(tr[i].id.substring(0,1)=="r"){ height = height + tr[i].offsetHeight; } } reportFrame.height = height; } </script> <body > <div id="toolbar"> <input type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoFirstPage();" value="首页"></input> <input type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoPreviousPage();" value="上一页"></input> <input type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoNextPage();" value="下一页"></input> <input type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoLastPage();" value="末页"></input> </div> <iframe id="reportFrame" src="../../decision/view/report?viewlet=/doc/Primary/DetailReport/Details.cpt&__showtoolbar__=false" width = 100% height = 80% frameborder="0" ></iframe> <p>页面其他部分</p> </body> <html>
3.5 保存预览
已完成示例请参照%FR_HOME%/WebReport/page_demo/auto.html

启动设计器,输入http://localhost:8075/webroot/help/page_demo/auto.html,效果如下图:

222

附件列表


主题: 部署集成
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗?只是浏览 [ 去社区提问 ]