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

最新推荐文章于 2022-10-03 20:54:50 发布

丁鹏程

最新推荐文章于 2022-10-03 20:54:50 发布

阅读量1.4k

点赞数

分类专栏：前端开发文章标签： iframe 自适应高度页签 HTML JavaScript

本文链接：https://blog.csdn.net/dpcwhhit/article/details/9004565

版权

前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文是基于以下页面需求而撰写的：在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可以直接使用）。