Iframe 高度自适应，js控制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/

黄山市民网：https://www.huangshanshimin.com/

相关文章