[JS] - iframe 自适应高度,无限级父框架,多层框架自适应

来源：http://www.javaeye.com/topic/644044

 

问题描述
    今天在处理一个Iframe自适应高度时遇到一个多层Iframe引用时的高度不能撑开的问题，效果同Demo1.


原因分析
    问题是由引用的顺序引起的，我们假设有3层Iframe引用，h1.html,h2.html,h3.html  h1包含h2,h2又包含h3,h3.html中有内容会出现高度适应问题，一般的处理方式是我们在引用h3的iframe中加入onload事件来让这个Iframe高度自适应引用的页面高度。这时我们打开h1.html就开发页面看起还是没有撑开，这是因为页面是一级一级的加载下去的，当h1引用h2 时，h2的高度是固定的，当h3加载完毕的时候h2的高度做了变化，但是这时h1的引用页面高度并没有改变就造成了页面看起来还是没有撑开，经和同事讨论后编写了一个JS的自动重新计算parent(父页面)中Iframe元素的高度，从而解决这个问题，原理主要是通过一直循环获取页面parent的 Iframe元素，当获取到top层时就结束

 

单个iframe适应

  
    

   
     
   
     onload
   
     =
   
     "
   
     this.style.height=iframe1.document.body.scrollHeight
   
     "
  
    

注：iframe1为该框架的ID，我在尝试不硬写名字的自适应方法，如果成功就换上来。

 

自适应多级iframe高度

  
    

   
     
   
     //
   
     进行Iframe的自动撑开,让所有父页面的Iframe都自动适应包含页高度
   
     

   
     function
   
      autoHeight(){
 
   
     var
   
      doc 
   
     =
   
      document,
 p 
   
     =
   
      window;
 
   
     while
   
     (p 
   
     =
   
      p.parent){
 
   
     var
   
      frames 
   
     =
   
      p.frames,
 frame,
 i 
   
     =
   
      
   
     0
   
     ;
 
   
     while
   
     (frame 
   
     =
   
      frames[i
   
     ++
   
     ]){
 
   
     if
   
     (frame.document 
   
     ==
   
      doc){
 frame.frameElement.style.height 
   
     =
   
      doc.body.scrollHeight;
 doc 
   
     =
   
      p.document;
 
   
     break
   
     ;
 }
 }
 
   
     if
   
     (p 
   
     ==
   
      top){
 
   
     break
   
     ;
 }
 }
}
  
    

 

 

 

 

 

某网友评论：

帖一個我們之前用的方法吧,比較好用:

  
    

   
     
   
     var
   
      getFFVersion
   
     =
   
     navigator.userAgent.substring(navigator.userAgent.indexOf(
   
     "
   
     Firefox
   
     "
   
     )).split(
   
     "
   
     /
   
     "
   
     )[
   
     1
   
     ]

   
     var
   
      FFextraHeight
   
     =
   
     getFFVersion
   
     >=
   
     0.1
   
     ?
   
     16
   
     :
   
     0
   
     

   
     function
   
      dyniframesize(iframename) {
 
   
     var
   
      pTar 
   
     =
   
      
   
     null
   
     ;
 
   
     if
   
      (document.getElementById){
 pTar 
   
     =
   
      parent.document.getElementById(iframename);
 }
 
   
     else
   
     {
 eval(
   
     '
   
     pTar = 
   
     '
   
      
   
     +
   
      iframename 
   
     +
   
      
   
     '
   
     ;
   
     '
   
     );
 }
 
   
     if
   
      (pTar 
   
     &&
   
      
   
     !
   
     window.opera){
 
   
     if
   
      (pTar.contentDocument 
   
     &&
   
      pTar.contentDocument.body.offsetHeight){
 pTar.style.height 
   
     =
   
      pTar.contentDocument.body.offsetHeight
   
     +
   
     FFextraHeight
   
     +
   
     25
   
     ;
 }
 
   
     else
   
      
   
     if
   
      (pTar.Document 
   
     &&
   
      pTar.Document.body.scrollHeight){
 pTar.style.height 
   
     =
   
      pTar.Document.body.scrollHeight;
 }
 }
}