iframe实现高度自适应，兼容FF、Opera、Safari

使用iframe可以省去很多ajax的复杂代码，但是在把iframe嵌入到div中会出现不能够自适应的问题，起初也在网上找了很多代码，大部分经过测试都不能兼容所有的浏览器。经过我在网上的搜索与相关的代码的修改，终于解决了兼容IE, FF, Opera 等大部分浏览器（Safari没有测试，应该也没问题）。

下面是我的代码，记录下来供以后参考：

index.html:

<div id="right">
<iframe id="rightFrame" name="frameContent" src="iframe.html"
    height="" scrolling="no" width="100%" frameborder="0" 
     onload="SetCwinHeight(this)"></iframe>
</div>

 

js代码：

function SetCwinHeight(iframeObj){
  if (document.getElementById){ 
      if (iframeObj){
          if (iframeObj.contentDocument && iframeObj.contentDocument.body.offsetHeight){
	      iframeObj.height = iframeObj.contentDocument.body.offsetHeight;
         } else if (document.frames[iframeObj.name].document && document.frames[iframeObj.name].document.body.scrollHeight){
                  iframeObj.height = document.frames[iframeObj.name].document.body.scrollHeight;
         }
     }
  }
}

 

iframe.html

  

<div class="content">		    
 有这样的名言叫：从哪跌倒，再从哪爬起来。想想自己，曾经跌倒过，却一直没能从那里爬起来。当年高考，虽然没有考

上理想的大学，但是却学到了理想的专业----工商管理。听起来很好地专业，因为这一专业毕竟和MBA有着千丝万缕的联系。所以那个时候很天真的给自己做了定位：努力学习，多学管理理论，将来一定要成为一名出色的职业经理人。为着这样的理想和目标，自认为我的大学生活还不算糜烂，因为毕竟有时间会光顾图书馆，阅读一些专业方面的书籍、报纸和杂志等，了解一些先进的管理理论和最新的经济前沿。
临近毕业，本来是满怀信心，希望自己可以得偿所愿，用这大学四年的所学来报答社会，谁知现实却是如此之残酷，我并未找

</div>

 iframe.html 中的js代码

window.onload = function() {
      if(top.location != self.location){
	var a = window.parent.document.getElementsByTagName('iframe');
	for (var i=0; i<a.length; i++){
	      if (a[i].name == self.name) {
	          a[i].height = document.body.scrollHeight; return;
               	     }
              }
      }
}

 这样就OK了，可以兼容全部主流浏览器了。

评论

3 楼 崔志军 2014-04-15  

不兼容谷歌。。。。

2 楼 wafj999 2010-06-02  

不兼容谷歌浏览器

1 楼 xkxmud 2009-12-11  

有问题，不能跨域，是否有解决办法？