欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Iframe 高度自适应，js控制Iframe 高度自适应

程序员文章站 2024-02-03 18:25:34
Iframe 高度自适应, js控制Iframe 高度自适应, iframe自适应高度 ©Copyright 蕃薯耀 2019年12月31日 http://fanshuyao.iteye.com/ 方法一：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);
}

 

 

 

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

©copyright 蕃薯耀 2019年12月31日

http://fanshuyao.iteye.com/

上一篇： 在php扩展中连接数据库

下一篇： 怎么通过PHP得到此URL跳转后的URL

推荐阅读