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