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 οnlοad="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 οnclick="resizeParent(1)"><span>tab1</span>  
                    </li>  
                    <li οnclick="resizeParent(2)"><span>tab2</span>  
                    </li>  
                    <li οnclick="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可以直接使用)。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值