码迷,mamicode.com
首页 > 其他好文 > 详细

总结iframe高度自适应,自适应子页面高度

时间:2016-03-04 16:15:01      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:

在网上找了很多iframe的高度自适应,发现很多兼容性都不是很好,于是自己总结了一下。 

页面html节点上要有

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<iframe id="mainFrame" name="mainFrame" scrolling="no" src="Index.aspx"
            frameborder="0" style="padding: 0px; width: 100%; height: 1000px;"></iframe>
调用    
<script type="text/javascript">
        startInit(‘mainFrame‘, 560);
</script>
技术分享
var browserVersion = window.navigator.userAgent.toUpperCase();
var isOpera = false;
var isFireFox = false;
var isChrome = false;
var isSafari = false;
var isIE = false;
var iframeTime;
function reinitIframe(iframeId, minHeight) {
    try {
        var iframe = document.getElementById(iframeId);
        var bHeight = 0;
        if (isChrome == false && isSafari == false)
            bHeight = iframe.contentWindow.document.body.scrollHeight;

        var dHeight = 0;
        if (isFireFox == true)
            dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;
        else if (isIE == false && isOpera == false)
            dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
        else
            bHeight += 3;
        var height = Math.max(bHeight, dHeight);
        if (height < minHeight) height = minHeight;
        iframe.style.height = height + "px";
    } catch (ex) { }
}
function startInit(iframeId, minHeight) {
    isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
    isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
    isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
    isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
    if (!!window.ActiveXObject || "ActiveXObject" in window)
        isIE = true;
    reinitIframe(iframeId, minHeight);
    if (iframeTime != null)
        clearInterval(iframeTime)
    iframeTime = window.setInterval("reinitIframe(‘" + iframeId + "‘," + minHeight + ")", 100);
} 
技术分享

 

 

测试发现兼容浏览器ie6-11、chrome+、firefox、opera、Safari、傲游云浏览器、360浏览器,兼容性更好,其他未测试,如发现高度不能自适应,请留言给我。 

参考http://www.kuqin.com/webpagedesign/20080516/8536.html

 

更新日志
2015-1-15 更新兼容IE11自动高度

2015-4-15 优化判断性能,同时修复iframe每加载一次,都会同时启用一个新的window.setInterval,导致多个window.setInterval同时运行。

转自:http://www.cnblogs.com/slyzly/articles/2422737.html

总结iframe高度自适应,自适应子页面高度

标签:

原文地址:http://www.cnblogs.com/mfc-itblog/p/5242276.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!