开发学院网页设计 Html iframe的自适应高度及iframe中含有页签的高度动态... 阅读

iframe的自适应高度及iframe中含有页签的高度动态适应

　2013-06-01 21:04:32　来源：WEB开发网　　　

核心提示： 在A页面（A.html）中嵌套了一个iframe（B.html），在B中实现页签功能，iframe的自适应高度及iframe中含有页签的高度动态适应，并要求B在A中的显示是没有滚动条，并且B中页签的高度是动态变化的，不会出现大片的空白或者内容因高度不够而无法下是完全的问题，而且不会让用户有两个页面的感觉，如下图，这是

在A页面（A.html）中嵌套了一个iframe（B.html），在B中实现页签功能，并要求B在A中的显示是没有滚动条，并且B中页签的高度是动态变化的。

如下图，这是从项目中截的图，图2明显比图1高度要高：

A.html

<html>
<head>
</head>
<body class="Pupwin">
	<div>  
		<table>
		</table>
		<iframe id="bIframe" name="bIframe" width="100%" frameborder="0" src="B.html" scrolling="no">
		</iframe>
	</div>
</body>
</html>

B.html

<html>
<head>
	<title>使用记录</title>
</head>
<script>
function iframeResizeHeight(frame_name,body_name,offset) {
	parent.document.getElementById(frame_name).height=document.getElementById(body_name).offsetHeight+offset;
}
//初始化高度
function Resize(){
     var frame_name="bIframe";
     var body_name="main";
     if(parent.document.getElementById(frame_name)){
          return iframeResizeHeight(frame_name,body_name,0);
     }
}
</script>
<body onload="Resize();">
<div id="main">
<table width="100%" height="25" border="0" cellpadding="0" cellspacing="0">  
    <tr>  
        <td align="left">  
            <div>  
                <ul id="whir_tab_ul">  
                    <li onclick="resizeParent(1)"><span>tab1</span>  
                    </li>  
                    <li onclick="resizeParent(2)"><span>tab2</span>  
                    </li>  
                    <li onclick="resizeParent(3)"><span>tab3</span>  
                    </li>    
                </ul>  
            </div>  
        </td>  
    </tr>  
</table>
 
<div id="tab1">
	<table width="100%" border="0" cellpadding="0" cellspacing="1" class="listTable">
		<tr><td>动态数据</td></tr>
		...
	</table>
</div>
 
<div id="tab2" style="display:none">
	<table width="100%" border="0" cellpadding="0" cellspacing="1" class="listTable">
		<tr><td>动态数据</td></tr>
		...
	</table>
</div>
<div id="tab3" style="display:none">
	<table width="100%" border="0" cellpadding="0" cellspacing="1" class="listTable">
		<tr><td>动态数据</td></tr>
		...
	</table>
</div>
 
</div>
</body>
 
<script type="text/javascript">
	var headHeight = document.getElementById("main").offsetHeight - document.getElementById("tab1").offsetHeight;
	function resizeParent(divIndex) {
		document.getElementById("tab" + divIndex).style.display = "block";
		var tabHeight = document.getElementById("tab" + divIndex).offsetHeight;
		document.getElementById("tab" + divIndex).style.display = "none";
		parent.document.getElementById("recordIframe").height = headHeight + tabHeight;
	}
</script>
 
</html>

在页面中获取隐藏的div的高度，第一步是让div显示，因为隐藏的div浏览器是不渲染的，直接取高度值为0，所以应设置display为block，取到高度后再设为none。

这种高度的自适应动态变化，会使页面更加的美观，不会出现大片的空白或者内容因高度不够而无法下是完全的问题，而且不会让用户有两个页面的感觉，目前测试适应各种版本的浏览器。