当前位置导航:炫浪网>>网络学院>>网页制作>>JavaScript教程

利用JAVASCRIPT让IFRAME框架的高度自适应

页面内嵌不同的网页内容时,导致iframe的高度无法与实现内容或浏览器高度相匹配。窗口大小变换时,不能iframe不能进行自动调整。这里,我们利用JAVASCRIPT让IFRAME框架的高度自适应。

首先,写出如下的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;
}

 
主页面,在加载完毕(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>

相关内容
赞助商链接