您的位置：首页 > 其它

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

2013-06-01 21:08 399 查看
本文是基于以下页面需求而撰写的：在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可以直接使用）。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航