解决iframe高度自适应的问题,兼容各浏览器

转自:http://blog.ccidnet.com/home.php?mod=space&uid=62827&do=blog&id=21266815


     方法一,在每个被包含页面的本身内容加载完毕之后,执行JS取得本页面的高度,然后获取同步父页面的iframe高度。这个做法很扯淡,因为需要在每个被包含页中都要加入一段相同的JS代码来做这个事情,创建了大量副本,想像一下假如我们
在自己的框架内包含的是Extjs呢,这种做法打死也实现不了。

     方法二,在主页面iframe的onload事件中执行JS,去获得被包含页面的内容高度,然后获取同步高度,这才是我们今天所需要研究的方法。
     以上的方法都只能处理了静的东西,就是只在内容加载的时候执行,如果JS去操作DOM引起的高度变化,此时就需要再次进行同步一次才能确保高度适应。

有人会说这样就可以了:可这样没办法在我們静态的修改了iframe的src值之后再次同步高度。
<iframe id="iFrame1" name="iFrame1" width="100%" οnlοad="this.height=iFrame1.document.body.scrollHeight" frameborder="0" src="index.htm"></iframe>

下面是我使用jquery写的实现方法,为了照顾IE这头不合群的倔驴,所以下面的代码单独照顾了一下他:
<script src='img/jquery-1.9.1.min.js'></script>
<script type='text/javascript'>
(function($){
    $.AutoiFrame = function(_o){
        var _o_=new Function("return "+_o)();
        if($.support.msie){
            $('#'+_o).ready(function(){$('#'+_o).height(_o_.document.body.scrollHeight)});
        }else{
            $('#'+_o).load(function(){$('#'+_o).height(_o_.document.body.scrollHeight)});
        }
    }
})(jQuery);
$(function(){
    $.AutoiFrame('f_1');
});
</script>


     上面的代码就可以实现在页面载入的时候自动修正iframe的高度,让其高度自适应,那如果我们打开页面之后再次修改了iframe內的src怎么同步呢?方法看下面:<input οnclick="$.AutoiFrame('f_1')" value="....
或者你感觉这样太麻烦,没关系我们还有解决办法,那你就用setInterval吧,他可以定时循环执行,即间隔多长时间执行一次。 window.setInterval(function(){$.AutoiFrame('f_1')},100);//延迟100毫秒循环执行一次,这样一来保证你iframe乖乖的,且会服服帖帖的,想怎么整治都行了,哦,顺便说一下,如果您感兴趣iframe的宽度而非iframe高度,那么其解决思路是一样的,照着葫芦画个瓢就行了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值