iframe高度自适应的解决方法(兼容多浏览器)

发布时间:2020-07-16编辑:脚本学堂
本文介绍下,iframe高度自适应的解决方法,可以兼容多个浏览器,有需要的朋友,参考下吧。

两种办法:

方法一,在每个被包含页在本身内容加载完毕之后,执行JS取得本页面的高度,然后去同步父页面的iframe高度。这个做法很扯淡,因為需要在每个被包含页都要去加入一段相同的JS代码来做这个事情,创建了好多副本,想像一下假如在框架内包含的是www.baidu.com呢,此法无果。

方法二,在主页面iframe的onload事件中执行JS,去取得被包含页的高度内容,然后去同步高度。這才是我們今天所需要研究的方法。

 以上的方法都只处理了静的东西,只在内容加载时执行,如果JS去操作DOM引起的高度变化,此時就需要再次進行同步一次才能確保高度適應。
在静态修改了iframe的src值之后,无法再次同步高度。
 

<iframe id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.scrollHeight" frameborder="0" src="index.htm"></iframe>

ie中jquery实现iframe高度自适应的方法。
 

<script src='img/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
(function($){
    //iframe高度自适应
    $.AutoiFrame = function(_o){
        var _o_=new Function("return "+_o)();
        if($.browser.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 onclick="$.AutoiFrame('f_1')" value="....
另外,还可以用setInterval,可以定时执行,即间隔一段时间执行一次。
 

window.setInterval(function(){$.AutoiFrame('f_1')},100); //延迟100毫秒循环執行一次。

另外,如果想实现iframe宽度自适应,可以参考此方法。