posts - 122,  comments - 25,  trackbacks - 0
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
posted on 2008-01-17 13:56 josson 阅读(9278) 评论(2)  编辑  收藏 所属分类: web开发


FeedBack:
# re: iframe 高度自适应
2008-09-08 22:44 | cssplay
iframe自适应高度及其演示实例
http://www.cssplay.org.cn/xhtml-tutorial/20080908/763.html  回复  更多评论
  
# re: iframe 高度自适应
2013-12-24 21:57 | 3a教程
1909434428@qq.com  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 
<2008年1月>
303112345
6789101112
13141516171819
20212223242526
272829303112
3456789

常用链接

留言簿(3)

随笔分类

随笔档案

收藏夹

搜索

  •  

最新评论

阅读排行榜

评论排行榜