iframe自适应高度

iframe自适应高度传统做法大致有两个：
方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。
方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。
在代码维护角度考虑，方法二是优于方法一的，因为方法一，每个被包含页都要去引入一段相同的代码来做这个事情，创建了好多副本。

但是碰到有些页面会根据用户的操作或者为了增加用户体验的时候我们的页面高度可能会增加。这就要求使用其他办法：我们可以用setInterval();

代码如下：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>iframe自适应高度-demo</TITLE>  
  3. <META http-equiv=Content-Type content="text/html; charset=GBK">  
  4. <META content="MSHTML 6.00.6001.18063" name=GENERATOR></HEAD>  
  5. <BODY>  
  6. <DIV    
  7. style="BORDER-RIGHT: 1px dotted; BORDER-TOP: 1px dotted; BORDER-LEFT: 1px dotted; WIDTH: 400px; BORDER-BOTTOM: 1px dotted"><IFRAME    
  8. id=frame_content src="iframe_b.html" frameBorder=0 scrolling=no    
  9. onload=this.height=100></IFRAME></DIV>  
  10. <DIV><BUTTON onclick=checkHeight()>Check Height</BUTTON></DIV>  
  11. <SCRIPT type=text/javascript>  
  12.             function reinitIframe(){   
  13.                 var iframe = document.getElementById("frame_content");   
  14.                 try{   
  15.                     var bHeight = iframe.contentWindow.document.body.scrollHeight;   
  16.                     var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;   
  17.                     var height = Math.max(bHeight, dHeight);   
  18.                     iframe.height =  height;   
  19.                 }catch (ex){}   
  20.             }   
  21.             window.setInterval("reinitIframe()", 200);   
  22.                
  23.             function checkHeight() {   
  24.                 var iframe = document.getElementById("frame_content");   
  25.                 var bHeight = iframe.contentWindow.document.body.scrollHeight;   
  26.                 var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;   
  27.                 alert("bHeight:" + bHeight + ", dHeight:" + dHeight);   
  28.             }   
  29.         </SCRIPT>  
  30. </BODY></HTML>  
posted @ 2008-07-22 20:39  zijinguang  阅读(599)  评论(0)    收藏  举报