Iframe highly adaptive, js highly adaptive control Iframe

Iframe highly adaptive, js Iframe highly adaptive control, iframe highly adaptive

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

http://fanshuyao.iteye.com/

Method a: js highly adaptive control Iframe

Before this method has been in use, no problem, but the latest findings in some cases not work (the specific reasons unknown)

/*
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);
};

Method two: html code control

When a method is not in effect, use the second method.

html head without any statement, are removed, as shown in the following code:

<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>

If adaptively above, you do not need the following; if the above is not adaptive to set

1, body style in the overflow: hidden; definitely not be omitted;

2, Iframe in height = '100%' scroll bar can not be set and no (default yes, an can not set)

Method three: The same control is js (unverified)

principle:

Iframe content page using a <div id = "iframeContent"> wrapping, div adaptive internal height will, therefore, can obtain a high degree of div achieved through subpages.

Iframe page

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

Parent page (embedded Iframe pages) increased js:

// domains or sub-page without "iframeContent" is not highly adaptive 
function reinitIframe (iframeId, minHeight) {
     the try {
         var iframes = 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" ; 
    } the catch (E) {
        iframe.style.height =  minHeight + "px";
    }
}

Method four: the same control js (unverified)

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 == to true ) 
            dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2; // if Firefox height increasing delete +2 
        the else  IF (isIE == false && isOpera == false && iframe.contentWindow) {
             the try { 
                dHeight = iframe.contentWindow.document.documentElement.scrollHeight; 
            } the catch (EX) { 
            } 
        } 
        the else  IF (== isIE to 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/

Iframe highly adaptive, js highly adaptive control Iframe

Guess you like