IFRAME自适应

最新推荐文章于 2022-03-21 14:00:09 发布

anand-s

最新推荐文章于 2022-03-21 14:00:09 发布

阅读量117

点赞数

文章标签： HTML

本文链接：https://blog.csdn.net/sslovetuzi/article/details/83970545

版权

用FineReport报表工具实现iframe框架自适应报表高度
将报表集成至Web页面中时，报表往往只是作为页面的某一部分嵌入在一个框架中如iframe中显示出来。由于报表每页数据是不定的，在最后一页可能只有几条数据，此时iframe框架将留有大片的空白，造成空间的浪费也使得界面不美观。这个时候我们就会希望，要是iframe框架大小能够根据报表页面的内容自动调整高度或宽度，就像下面的效果。

最后一页记录数较少，此时iframe框架高度变小

像这样的页面如何写呢？请看下面完整的页面代码：

1. 页面auto.html完整代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

</head>
<script type="text/javascript">
// 由于gotoNextPage()等方法调用后，后台服务器返回结果需要一定的时间，
而我们需要获得返回结果中的行
// 因此添加监听，contentPane.on("afterload",function(){})：当选择页
加载完毕后调用setframeHeight方法获取行数及高度从而调整框架大小
function afterload(){
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");
// 由于报表页面还存在页边距，因此框架高度是大于所有行累计的高度的，这里
赋一个初始值以表示边距的大小
var height = 50;
for(var i=0;i
<tr.length;i++){
height = height + tr[i].offsetHeight;
}
reportFrame.height = height;
}
</script>
<body>
<div id="toolbar">
<input type="button" οnclick="document.getElementById('reportFrame').
contentWindow.contentPane.gotoFirstPage();afterload();" value="首页"></input>
<input type="button" οnclick="document.getElementById('reportFrame').
contentWindow.contentPane.gotoPreviousPage();afterload();" value="上一页"></input>
<input type="button" οnclick="document.getElementById('reportFrame').
contentWindow.contentPane.gotoNextPage();afterload();" value="下一页"></input>
<input type="button" οnclick="document.getElementById('reportFrame').
contentWindow.contentPane.gotoLastPage();afterload();" value="末页"></input>
</div>

<iframe id="reportFrame" src="/WebReport/ReportServer?reportlet=
/doc/Tutorial/Form/basic.cpt" width = 100% height = 80%></iframe>

页面其他部分

</body>
<html>

2. 实现原理

以上例子便实现了iframe框架自适应报表高度需求，主要思路如下

2.1 首先点击上一页、下一页等按钮

调用FineReport报表工具封装好的js事件如gotoLastPage()，后台服务器将对应的结果返回给浏览器；

2.2 添加监听

我们需要获取服务器返回给浏览器的页面，因此需要添加一个监听看浏览器是否已经将结果加载完毕。添加监听的方法为contentPane.on("afterload",function(){})；

2.3 设置框架高度

一旦发现浏览器已经将结果加载完毕，我们便可以获取结果如最后一页数据有多少行，遍历每行获得高度并进行累计，将最终需要的高度(像素px为单位)赋给框架。

for(var i=0;i

height = height + tr[i].offsetHeight;

}

reportFrame.height = height;

3. 效果查看

将代码保存至WebReport\auto.html，启动服务器，在浏览器中输入http://localhost:8079/WebReport/auto.html，便可以看到效果了。

anand-s

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IFRAME自适应

用FineReport报表工具实现iframe框架自适应报表高度将报表集成至Web页面中时，报表往往只是作为页面的某一部分嵌入在一个框架中如iframe中显示出来。由于报表每页数据是不定的，在最后一页可能只有几条数据，此时iframe框架将留有大片的空白，造成空间的浪费也使得界面不美观。这个时候我们就会希望，要是iframe框架大小能够根据报表页面的内容自动调整高度或宽度，就像下面的效果。...
复制链接

扫一扫