iframe显示高度自适应兼容多浏览器

最新推荐文章于 2024-11-15 22:52:56 发布

demon2008d

最新推荐文章于 2024-11-15 22:52:56 发布

阅读量272

点赞数

分类专栏： iframe 文章标签： iframe 浏览器 firefox function safari chrome

iframe 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在页面上用了iframe带来方便的同时也带来了麻烦，在IE6里能正常显示的iframe在其他的浏览器里确十分丑陋而不方便。为了解决 IE,Firefox,chrome,safari中iframe显示高度自适应问题上网海找了一遍，试了好几个方案都不妥，最后发现了一个可以正常解决的方案。
首先加入以下的JS代码：

function stateChangeIE(_frame)
{
    if (_frame.readyState=="complete")//state: loading ,interactive,   complete
    {
        AutoHeight();
    }  
}
function stateChangeFirefox(_frame)
{  
    AutoHeight();
}
    
function AutoHeight()
{
    if(document.readyState!='complete')
    {
        setTimeout( function(){AutoHeight();},50 );
        return;
    }
    else
    {
        try
        {   //IE、fireFox下测试通过
            var ifobj=document.getElementById("mainFrame");
            ifobj.style.height = ifobj.contentWindow.document.body.scrollHeight + 0 + "px";
        }   //注意，别忘了加最后那个"px",不然fireFox下就不起作用了
        //加的那0是为了让非IE浏览器高度不会一直增加
        catch(e)
        {}
    }
}

其次使用iframe如下：

< iframe src="./welcome.html" name="mainFrame" id="mainFrame"
                onreadystatechange="stateChangeIE(this)"
                οnlοad="stateChangeFirefox(this)" style="width: 100%; height: 9px"
                frameborder="0"></iframe >

更改完成了，关闭浏览器重新打开或刷新页面，即可看到正常显示效果。以上代码在IE6，Firfox 3.6.11，Chrome(谷歌浏览器)

7.0.544.0，Safari 5.0.2版本上显示正常。

转 http://cpbcw.com/article/1308.html