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

最新推荐文章于 2022-05-25 14:09:35 发布

转载最新推荐文章于 2022-05-25 14:09:35 发布 · 86 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shineqiujuan/archive/2009/01/06/1370113.html

文章标签：

#javascript #ViewUI

本文介绍了一种使IFRAME元素高度自适应其内容高度的方法。通过JavaScript动态调整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是给不同的浏览器添加监听方法。

转载于:https://www.cnblogs.com/shineqiujuan/archive/2009/01/06/1370113.html