iframe高度自适应(兼容各浏览器)的完美解决

方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。这个做法很扯淡,因為需要在每个被包含页都要去加入一段相同的JS代码来做这个事情，创建了好多副本,想像一下假如我们在自己的框架内包含的是www.jb200.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($){
    $.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高度自适应的问题就完美解决了，iframe宽度自适应与上同理，大家可以自行研究下。