- 错误描述:报表自适应在ie低版本情况下不能正确的填充满屏
- Ie版本:8.0.6001及以下
- 错误原因:ie低版本的onresize方法调用顺序出现错误,导致获取到的window高度出现错误,开发人员可以在设置高度前的js代码中添加alert弹出具体的window高度,就可以发现ie是先获取的高度,后填充的body,然后导致设置高度出现问题。(注:正常情况下应该在用户调整完了浏览器大小后在出发onresize事件)
- 解决办法:在正常调用onresize方法中,设置一个延迟检测,使之判断iframe是否正确的填充浏览器高度,如果填充正确则关闭检测,不正确则重新设置高度。
- 具体代码实现:
- 首先在文档加载结束的时候设置iframe的高度,然后添加对window 的resize事件的监听,里面包含正常的设置iframe高度方法,和延迟检测方法。
$(document).ready(function(){
//设置iframe的高度
setIframeHeight();
$(window).resize(function(){
setIframeHeight();
autoSetIframeHeight();
});
}
2.因为resize后window的高度会发生变化,所以我们可以保一个变量,判断它是否和错误的值相等,如果不等则重新设置,如果相等则终止检测
function autoSetIframeHeight(){
var windowHeight= $(window).height();
var timer= setInterval(function(){
if(windowHeight!=$(window).height()){
setIframeHeight();
windowHeight= $(window).height();
}else{
//终止interval
clearInterval(timer);
}
},300);
return timer;
}
3.设置iframe高度整体高度,减去iframe上面的元素的高度
//设置iframe的高度
function setIframeHeight()
{
var iframe = $("#iframepage");
var h = $(window).height() - iframe.offset().top - 10;
// alert($(window).height()+":"+iframe.offset().top+":"+h);
iframe.height(h);
}