Iframe 高度自適應，js控制Iframe 高度自適應

本文轉載自查看原文 2019-12-31 10:47 1286 蕃薯耀/ Html&Css/ Iframe 高度自適應/ iframe自適應高度/ JavaScript&Jquery/ 蕃薯耀分享/ js控制Iframe 高度自適應/ iframe高度

Iframe 高度自適應, js控制Iframe 高度自適應, iframe自適應高度

================================

©Copyright 蕃薯耀 2019年12月31日

http://fanshuyao.iteye.com/

方法一：js控制Iframe 高度自適應

這個方法之前一直都在用，沒有問題，但最新發現有些情況不行（具體原因不清楚）

/*
function thisIframeHeightAuto(){
    setIframeHeight("auditList");
};
 */
//window.setInterval("iframeHeightAuto()", 200);
function setIframeHeight(iframeId){
    var cwin = document.getElementById(iframeId);
    if(document.getElementById){
        if(cwin && !window.opera){
            if(cwin.contentDocument && cwin.contentDocument.body.offsetHeight){
                cwin.height = cwin.contentDocument.body.offsetHeight;//FF NS
                console.log("FF NS cwin.height=" +cwin.height);
            }else if(cwin.Document && cwin.Document.body.scrollHeight){
                cwin.height = cwin.Document.body.scrollHeight;//IE
                console.log("IE cwin.height=" +cwin.height);
            }
        }else if(cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight){
            cwin.height = cwin.contentWindow.document.body.scrollHeight;//Opera
        }
    }
    console.log("cwin.height=" + cwin.height);
};

方法二：html代碼控制

在方法一不生效的時候，使用了方法二。

頭部的html不需要任何的聲明，都去掉，如下面代碼所示：

<html>
<head>
<meta charset="UTF-8">
<title>iframe高度自適應</title>
</head>
<body>

    <div class="mt20">
        <iframe id="mapIframe" border="0" frameborder="0" scrolling="no" 
            width="100%" height="100%" style="padding: 0;margin: 0;" ></iframe>
    </div>

<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
</body>
</html>

上面如果能自適應，就不需要下面的；如果上面還不自適應，需要設置

1、body樣式中的 overflow: hidden; 絕對不對省略；

2、Iframe 中的 height='100%' 以及滾動條不能設為no(默認是yes，不用設置即可)

方法三：同樣是js控制（未驗證）

原理：

Iframe頁面的內容利用一個<div id="iframeContent">進行包裹，div會自適應內部高度，因此，可以通過div實現子頁面高度的獲取。

Iframe頁面

<body>
<div id="iframeContent">
    ...
</div>
<body>

父頁面（嵌入Iframe的頁面）增加js：

//跨域或子頁面無"iframeContent"則高度不能自適應
function reinitIframe(iframeId, minHeight) {
    try {
        var iframe = document.getElementById(iframeId);
        var height = iframe.contentWindow.document.getElementById("iframeContent").offsetHeight;
        if (!height) {
            height = minHeight;
        }
        if (height < minHeight) {
            height = minHeight;
        }
        iframe.style.height = height + "px";
    } catch (e) {
        iframe.style.height =  minHeight + "px";
    }
}

方法四：同樣是js控制（未驗證）

var browserVersion = window.navigator.userAgent.toUpperCase();
var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
var isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
var isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
var isIE = (!!window.ActiveXObject || "ActiveXObject" in window);
var isIE9More = (! -[1,] == false);
function reinitIframe(iframeId, minHeight) {
    try {
        var iframe = document.getElementById(iframeId);
        var bHeight = 0;
        if (isChrome == false && isSafari == false) {
            try {
                bHeight = iframe.contentWindow.document.body.scrollHeight;
            } catch (ex) {                
            }
        }
        var dHeight = 0;
        if (isFireFox == true)
            dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;//如果火狐瀏覽器高度不斷增加刪除+2
        else if (isIE == false && isOpera == false && iframe.contentWindow) {
            try {
                dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
            } catch (ex) {
            }
        }
        else if (isIE == true && isIE9More) {//ie9+
            var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId);
            if (heightDeviation == 0) {
                bHeight += 3;
            } else if (heightDeviation != 3) {
                eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight);
                bHeight += 3;
            }
        }
        else//ie[6-8]、OPERA
            bHeight += 3;

        var height = Math.max(bHeight, dHeight);
        if (height < minHeight) height = minHeight;
        //alert(iframe.contentWindow.document.body.scrollHeight + "~" + iframe.contentWindow.document.documentElement.scrollHeight);
        iframe.style.height = height + "px";
    } catch (ex) { }
}

//定時任務
function startInit(iframeId, minHeight) {
    eval("window.IE9MoreRealHeight" + iframeId + "=0");
    window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
}

（如果你覺得文章對你有幫助，歡迎捐贈，^_^，謝謝！）

================================

http://fanshuyao.iteye.com/

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 iframe高度自適應的6個方法實現iframe高度自適應 html iframe高度自適應設置iframe高度自適應屏幕高度總結iframe高度自適應，自適應子頁面高度 js控制高度自適應，做到響應式 iframe 自適應高度的多種實現方式用iFrame Resizer解決iframe高度自適應問題 iframe高度自適應子頁面高度使用onload屬性 iframe完美解決自適應內嵌網頁高度