两种办法:
方法一,在每个被包含页在本身内容加载完毕之后,执行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宽度自适应,可以参考此方法。