让IFRAME根据其中的内容自适应高度

项目的界面采用的是最常规的结构,左边是菜单,右边是内容,而点击菜单,会在右边展示不同的页面,为了减少页面刷新的影响,我们依旧考虑用IFRAME,之前用微软的模板页,可是刷新太频繁,给客户的体验不好。而用IFRAME的时候,又不希望其出现滚动条,就需要其自适应高度。之前JS的基础不好,在网上找到了些解决方案,可是兼容性不好,最近加强了Javascript的学习,今天对程序做了些做了些修改,调试了下,还不错。代码如下:

Code
function iframeAutoFit()
{
var ex;
    
try
    {
        
if(window!=parent)
        {
            
var a = parent.document.getElementsByTagName("IFRAME");
            
for(var i=0; i<a.length; i++
            {
                
if(a[i].contentWindow==window)
                {
                    
var h1=0, h2=0;
                    
if(document.documentElement && document.documentElement.scrollHeight)
                    {
                        h1
=document.documentElement.scrollHeight;
                    }
                    
if(document.body) h2=document.body.scrollHeight;
                    
var h=Math.max(h1, h2);
                    
if (window.ActiveXObject) { h += 4; }
                    
else {h += 4;}
                    a[i].style.height 
= h + "px";
                    window.removeEventListener(
'resize', iframeAutoFit, false);//兼容谷歌浏览器时要去掉RISZE监听
                }
            }
        }
    }
catch (ex){}
}
if(document.attachEvent)
{
    window.attachEvent(
"onload", iframeAutoFit);
    window.attachEvent(
"onresize", iframeAutoFit);
}
else
{
    window.addEventListener(
'load', iframeAutoFit, false);
    window.addEventListener(
'resize', iframeAutoFit, false);
}

 对以上程序稍做说明:

判断Iframe的高度和其源文件的高度的最大值,给Iframe高度赋最大值。最后在加4个像素.if语句主要是为了判断不同的浏览器。最后的两段IF else是给不同的浏览器添加监听方法。

posted @ 2009-01-06 11:03  chunchill  阅读(670)  评论(2编辑  收藏  举报