(转)iframe自适应

http://www.blogjava.net/josson/archive/2008/01/17/175914.html

1、目的
系统通过一内嵌页面(iframe) 来展现网页内容（也包括内嵌页中再嵌一个网页），这将会引起如下几个问题：
a.不同的网页内容多少不一致，导致iframe的高度无法与实现内容或浏览器高度相匹配。
b.窗口缩放时，不能iframe不能进行自动调整。

针对这两个问题，写了一些js方法，使iframe自动适应内容或浏览器高度。

2、js代码
在主框回页面中包括如下js方法:

/* *
 * 内嵌页面的高度设置
  */
function  handleFrameLoad() {
  var  hDoc  =  getBodyHeight(document);
  var  tblmain  =   document.getElementById('tblMain');
  var  mFrame  =  window.mainFrame;
  var  hFrameDoc  =  getFrameHeight(mFrame);
  var  hTable  =  hDoc - 80 ; //减去该页面除iframe外其他控件所占的高度.
  if (hFrameDoc  >  hTable) hTable  =  hFrameDoc;
 tblmain.style.height  =  hTable;
 mFrame.height  =  hTable;
  if (window.mainFrame.moduleRight  !=   null ){
    //表示该内嵌页，包含 内嵌 的页面，页iframe的id固定为moduleRight。
    initFrameHeight(mFrame,hTable);
 }
}

/* *
 * 获取当前页面的高度
  */
function  getBodyHeight(doc){
   if (doc.all)  return  doc.body.offsetHeight;
   else   return  doc.body.scrollHeight;
}

/* *
 * 获取内嵌页中的高度.
 * 若另含子内嵌( moduleRight )页时,应考虑该页面的高度.
  */
function  getFrameHeight(mFrame){
   var  h1  =  mFrame.document.body.offsetHeight;
   var  h2  =  mFrame.document.body.scrollHeight;
   if (mFrame.moduleRight  !=   null ){
       var  h3  =  mFrame.moduleRight.document.body.scrollHeight;
     if (h3  >  h2) h2  =  h3;
  }
   return  h2;
}

/* *
 * 设置子内嵌页面的高度.
 * 通过设置iframe所在table的高度来调整。
  */
function  initFrameHeight(frame,hFrame){
   var  tbl =  frame.document.getElementById('tblMainFrame');
  tbl.style.height  =  hFrame;
}

3、其他设置
主页面(main.jsp)，在加载完毕（onload）、窗口大小调整(onresize)，以及iframe的加载完毕时，需调用:handleFrameLoad，代码如下:

< html >
   
   < body  onload ="handleFrameLoad();"  onResize ="handleFrameLoad();" >
   
   < iframe  src =""  id ="mainFrame"  name ="mainFrame"  border =0  width =100%  height =100%  frameborder ="0"  marginwidth ="0"  hspace ="0"  scrolling ="no"  onload ="handleFrameLoad();" />
   
   </ body >
</ html

其他内嵌页如下(注：此处的iframe高度设为100%，其高度由父页面通过设置table<tblMainFrame>的高度来进行调整)：

< html >
   
   < body  class ="body"  style ="overflow:hidden;margin:0px;padding:0px" >
     < table  width ="100%"  height ="100%"  id ="tblMainFrame"  border ="0" align ="center"  cellpadding ="0"  cellspacing ="0" >
      < tr >
        < td  id ='content'  height =100% >
          < iframe  src ="about:blank"  width ="100%"  height ="100%"  name ="moduleRight"  id ="moduleRight"  frameborder ="0"  hspace ="0" />
        </ td >
      </ tr >
     </ table >
   </ body >
</ html

4、样例下载: sample