iframe 自适应高度,无限级父框架,多层框架自适应

 

问题描述
    今天在处理一个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适应

  

   <!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

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

  

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

 

自适应多级iframe高度

  

   <!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->
   //
   进行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
   ; } } }

  

 

 

 

 

 

某网友评论：

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

  

   <!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->
   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; } } }