用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" onclick="document.getElementById('reportFrame').
contentWindow.contentPane.gotoFirstPage();afterload();" value="首页"></input>
<input type="button" onclick="document.getElementById('reportFrame').
contentWindow.contentPane.gotoPreviousPage();afterload();" value="上一页"></input>
<input type="button" onclick="document.getElementById('reportFrame').
contentWindow.contentPane.gotoNextPage();afterload();" value="下一页"></input>
<input type="button" onclick="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,便可以看到效果了。
分享到:
相关推荐
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
### iframe自适应高度和宽度详解 在Web开发中,`iframe`(Inline Frame)是一种常用的HTML元素,用于在当前页面内嵌入另一个HTML文档。它能够实现页面内部局部刷新的效果,广泛应用于各种复杂的网页布局中。然而,...
【标题】:“iframe自适应高度.rar”涉及到的关键知识点主要集中在如何使用JavaScript来处理网页中iframe元素的高度自适应问题。在Web开发中,iframe(Inline Frame)是一种内联框架,常用于在同一个HTML文档中嵌入...
### iframe自适应高度(兼容多种浏览器) 在网页开发过程中,`iframe`是一种常用的元素,用于在当前页面中嵌入另一个HTML文档。然而,默认情况下,`iframe`的高度是固定的,这可能会导致内容显示不完全或者出现不必要...
然而,`<iframe>`的高度自适应问题常常困扰着开发者,尤其是当`<iframe>`内部的内容动态加载或者变化时,如何让`<iframe>`自动调整其高度以适应内容,而不会导致滚动条溢出或内容被截断,成为了一个常见需求。...
### iframe自适应高度实现方法详解 在网页设计与开发中,`iframe`(Inline Frame)是一种常用的HTML元素,用于在当前文档中嵌入另一个HTML文档。然而,在实际应用过程中,经常会遇到`iframe`内容高度固定导致页面...
为了解决这个问题,`jQuery`提供了一个专门的插件——"jquery对iframe自适应高度插件"。 这个插件是专门为了解决`iframe`高度自适应的问题而设计的,它允许`iframe`根据其内部内容自动调整高度,确保用户无需滚动就...
"再谈iframe自适应高度"这个主题,关注的是如何使iframe的内容区域根据所加载页面的高度自动调整,以避免滚动条出现或者内容被截断的问题。在网页设计中,尤其是在构建响应式布局时,这是一个非常关键的优化点。 1....
iFrame自适应高度兼容各主流浏览器 iFrame自适应高度是指在网页中嵌入iFrame时,使其高度能够自动适应其内容的高度,从而避免了出现滚动条的问题。下面是实现iFrame自适应高度的方法和相关知识点。 知识点1:...
iFrame 自适应高度(兼容所有主浏览器) iFrame 自适应高度是前端开发中常见的问题,很多开发者在搜索引擎中搜索相关解决方案,但大多数文章只能解决静态高度的问题,而忽视了 JS 操作 DOM 之后的动态同步问题。...
因为有一个项目要用到iframe自适应高度,网上搜索了以下结果无数,不过看来看去都是那几个,而且基本都测试了一遍,所说的兼容根本不是那么回事,要不IE不正常,要不其他浏览器显示不正常,最后无奈,综合网上的方法...
在探讨“基于jQuery的兼容各种浏览器的iframe自适应高度的脚本”这一主题时,我们首先需要理解几个关键概念:iframe、自适应高度以及jQuery。 ### 1. iframe概述 iframe,即Inline Frame,是HTML中一个用于在当前...
多层嵌套iframe 自适应高度的解决方法
在网页设计中,`iframe`(Inline Frame)是一种嵌入其他网页或内容的标签,它允许我们在一个页面中展示多...通过下载提供的`iframe自适应高度.doc`文档,你可以得到更详细的步骤和解释,以便更好地理解和应用这些技术。
### iframe自适应高度详解 在网页开发中,`iframe`是一种常用的技术,用于在一个HTML页面中嵌入另一个HTML页面。然而,默认情况下,`iframe`的高度是固定的,这可能导致页面布局问题,尤其是当嵌入的内容高度不确定...
### iframe自适应高度(DOM动态操作) #### 概述 在网页开发中,`iframe`是一种常用的技术,用于在一个HTML页面中嵌入另一个HTML页面。然而,在实际应用中经常会遇到一个问题:即`iframe`的高度与内嵌页面的实际...
### iframe自适应高度知识点详解 #### 一、概述 在网页设计与开发中,`<iframe>`(Inline Frame)是一种常用的HTML元素,用于在当前页面内嵌入另一个HTML文档。随着响应式设计的需求日益增加,如何使`<iframe>`内...
为了解决这个问题,我们需要让`iframe`能够自适应其内容的高度。本文将详细讲解如何使用JavaScript实现`iframe`自适应高度的解决方案,确保在各种主流浏览器中都能正常工作。 首先,理解`iframe`的基本结构和属性是...