首页 > 上网技巧 > 电脑小技巧 > 正文

真正实现iframe自适应高度的问题 兼容各种浏览器

时间:2014-07-28 12:02 作者:QQ地带 我要评论

在Google输入关键字"iframe自适应高度"之后你会发现有"找到约 153,000 条结果",我大概的看了一下,发现基本上就那两叁篇文章被转载来转载去.真正解决问题的没有.那我今天就不和他们同流合污了,经过我的深入研究和各种尝试最终找到了解决办法,分享给大家.
     解决高度自适应的问题有两种办法:
     方法一,在每个被包含页在本身内容加载完毕之后,执行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>
 
 
下边是我使用jquery写的实现方法,为了照顾IE这头不合群的倔驴,所以下边的代码单独照顾了一下他:
 
<script src='img/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
(function($){
    //让iframe自适应高度欢迎转载但请注明出处www.oicqzone.com
    $.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');
});欢迎转载但请注明出处www.oicqzone.com
 
</script>
 
上边的代码就可以实现在页面载入的时候自动修正iframe的高度,让其高度自适应,那如果我们打开页面之后再次修改了iframe内的src怎麼同步呢?方法看下边:
 
<input onclick="$.AutoiFrame('f_1')" value="....
 
或者如果你感觉这样太麻烦,没关系我们还有解决方法,那你就用setInterval吧,他可以定时循环执行,即间隔多长时间执行一次.
 
window.setInterval(function(){$.AutoiFrame('f_1')},100);//延迟100毫秒循环执行一次
这样一来保证让你的iframe乖乖的,且会服服帖帖,想怎麼整治都行了,哦,顺便说一下如果你感兴趣的是iframe的宽度而非iframe高度那么其解决思路是一样的,照着葫芦画个瓢就行了.

标签: iframe
顶一下
(2)
100%
踩一下
(0)
0%

Google提供的广告