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

来源:互联网 发布:用ps做淘宝店招 编辑:程序博客网 时间:2024/05/23 01:58

转自:iframe实现高度自适应,兼容FF、Opera、Safari


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

下面是我的代码,记录下来供以后参考:

index.html:

Java代码  收藏代码
  1. <div id="right">  
  2. <iframe id="rightFrame" name="frameContent" src="iframe.html"  
  3.     height="" scrolling="no" width="100%" frameborder="0"   
  4.      onload="SetCwinHeight(this)"></iframe>  
  5. </div>  

 

js代码:

Js代码  收藏代码
  1. function SetCwinHeight(iframeObj){  
  2.   if (document.getElementById){   
  3.       if (iframeObj){  
  4.           if (iframeObj.contentDocument && iframeObj.contentDocument.body.offsetHeight){  
  5.           iframeObj.height = iframeObj.contentDocument.body.offsetHeight;  
  6.          } else if (document.frames[iframeObj.name].document && document.frames[iframeObj.name].document.body.scrollHeight){  
  7.                   iframeObj.height = document.frames[iframeObj.name].document.body.scrollHeight;  
  8.          }  
  9.      }  
  10.   }  
  11. }  

 

iframe.html

  

Html代码  收藏代码
  1. <div class="content">           
  2.  有这样的名言叫:从哪跌倒,再从哪爬起来。想想自己,曾经跌倒过,却一直没能从那里爬起来。当年高考,虽然没有考  
Html代码  收藏代码
  1. 上理想的大学,但是却学到了理想的专业----工商管理。听起来很好地专业,因为这一专业毕竟和MBA有着千丝万缕的联系。所以那个时候很天真的给自己做了定位:努力学习,多学管理理论,将来一定要成为一名出色的职业经理人。为着这样的理想和目标,自认为我的大学生活还不算糜烂,因为毕竟有时间会光顾图书馆,阅读一些专业方面的书籍、报纸和杂志等,了解一些先进的管理理论和最新的经济前沿。  
  2. 临近毕业,本来是满怀信心,希望自己可以得偿所愿,用这大学四年的所学来报答社会,谁知现实却是如此之残酷,我并未找  
Html代码  收藏代码
  1. </div>  

 iframe.html 中的js代码

Js代码  收藏代码
  1. window.onload = function() {  
  2.       if(top.location != self.location){  
  3.     var a = window.parent.document.getElementsByTagName('iframe');  
  4.     for (var i=0; i<a.length; i++){  
  5.           if (a[i].name == self.name) {  
  6.               a[i].height = document.body.scrollHeight; return;  
  7.                      }  
  8.               }  
  9.       }  
  10. }  

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


0 0
原创粉丝点击