Ifram框架自适应内容的高度(代码简单易懂ie7,8,9,火狐,谷歌都测试通过)

本文介绍了一种解决Iframe自适应高度的问题的方法,并通过修改原有代码实现了对不同浏览器的支持,确保Iframe能够根据其内容自动调整高度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Ifram框架自适应内容的高度这个是长期困扰我的一个问题,今天有时间又把之前的代码拿出来研究了下,刚好最近我在做一个项目,经常用到JQ的写法,举一反三,让我找到了方法:


这个是之前网上找的,只能支持IE7:代码如下

<script language="javascript">
        function SetCwinHeight()//自动拉伸
        {
            var xsun = document.getElementById("main"); //iframe id
            if (document.getElementById) {
                if (xsun && !window.opera) {
                    if (xsun.contentDocument && xsun.contentDocument.body.offsetHeight) {
                        xsun.height = xsun.contentDocument.body.offsetHeight + 20;
                    } else if (xsun.Document && xsun.Document.body.scrollHeight) {
                        xsun.height = xsun.contentDocument.body.offsetHeight + 20;
                    }
                }
            }
        }
    </script>


我修改后的代码:

<script language="javascript">
        function SetCwinHeight()//自动拉伸
        {
            var xsun = document.getElementById("main"); //iframe id
            //var h1 = xsun.contentDocument.body.offsetHeight;
            var h2 = document.documentElement.offsetHeight;
            if (document.getElementById) {
                if (xsun && !window.opera) {
                    if (xsun.contentDocument && h2) {
                        xsun.height = h2 + 20;
                    } else if (xsun.Document && xsun.Document.body.scrollHeight) {
                        xsun.height = h2 + 20;
                    }
                }
            }
        }
    </script>

应该能很清楚的看到区别在哪里,就是var h1 = xsun.contentDocument.body.offsetHeight;
                                                                    var h2 = document.documentElement.offsetHeight;

h1取出来的高度都为0,h2才是正确高度。具体含义自己去百度下就知道两者的区别了

调用方法:

<iframe frameborder="0" id="main" name="main" onload="javascript:SetCwinHeight();"
                        src="xsun.html" marginwidth="0" marginheight="0" scrolling="no" style="z-index: 1;
                        width: 100%; min-height: 300px;"></iframe>


这里还要注意一点的是:iframe的ID一定要指名,且最小高度也要指定一个,不然会没有效果

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值