iframe的自适应高度及iframe中含有页签的高度动态适应
本文是基于以下页面需求而撰写的：在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。
这种高度的自适应动态变化，会使页面更加的美观，不会出现大片的空白或者内容因高度不够而无法下是完全的问题，而且不会让用户有两个页面的感觉，目前测试适应各种版本的浏览器。
注：以上代码不能直接运行，只是样例。主要阐述用JS代码如何实现这种功能（JS可以直接使用）。
