自适应高度的iframe

在开发项目中会遇见需要使用iframe的情况,,但iframe的自适应能力非常差,特别是用于侧边栏的时候,iframe的高度是固定的,不能随内容的多少而变换,这就会严重影响页面的美观,这里就介绍一种使用javascript方法来解决这个问题.

原理很简单,就是当页面载入的时候算出iframe所引用页面的高度,然后把得出的高度赋给iframe,这样就实现的iframe高度的自适应.下面我们看看代码:

javascript的代码:

<script language=”javascript”>
window.onload = (function () { 
var iObj = document.getElementById(‘demo’);
iObj.height =  iObj.contentWindow.document.documentElement.scrollHeight;
});
</script>

Html代码:

<iframe frameborder=”0″ src=”sidebar.html” class=”iframe_style”  id=”demo” name=”demo” scrolling=”no”></iframe>

 弊端:
目前在实际运用中发现这种方法并不完美,存在一下几种弊端

1. 效率问题,如果iframe引用的是结构复杂的动态页面,会导致页面加载时间很长,影响用户浏览(除IE6的浏览器可以用min-height来缓解这种现象)
2. iframe高度相对固定,iframe的高度是通过加载页面是即时算出来的,也就是说在不刷新主页面的情况下,如果iframe引用页面内容改变(比如翻页,而且第二页的内容比第一页多),那么就会出现内容显示不完全的情况…