IFrame高度设置

由于最近想实现网页局部刷新,使用的IFrame,只要给IFrame赋给新的src值,便可以加载不同的页面了。但让人烦恼的问题也随之而来了,那便是如何让IFrame自身的高度随子页面而变化。上网搜了好多方法,发现都不适用。

很多人的方法都是这样的。在IFrame中设置 οnlοad="autoHeight();“

function autoHeight(){

        var iframe =document.getElementById("container");

        if(iframe.Document){//ie自有属性

            iframe.style.height =iframe.Document.documentElement.scrollHeight;

        }elseif(iframe.contentDocument){//ie,firefox,chrome,opera,safari

            iframe.height =iframe.contentDocument.body.offsetHeight ;

        }

    }


这种方法在FireFox和Chrome中显示很好,但是在IE中完全不好使,后来才发现,在IE中不能用iframe.Document,得用iframe.contentWindow。

修改之后的代码为:

function autoHeight(){

        var iframe = document.getElementById("container");

        if(iframe.Document){//ie自有属性

        iframe.style.height =  iframe.contentWindow.document.body.scrollHeight+20;

        }else if(iframe.contentDocument){//ie,firefox,chrome,opera,safari

            iframe.height=10;

            iframe.height = iframe.contentDocument.body.offsetHeight;

        }

    }

这样在IE、FireFox和Chrome中就都好使了。


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值