zoukankan      html  css  js  c++  java
  • 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可以直接使用)。

  • 相关阅读:
    2021NUAA暑假集训 Day3 题解
    2021NUAA暑假集训 Day2 题解
    2021NUAA暑期模拟赛部分题解
    CodeForces 1038D Slime
    UVA 11149 Power of Matrix
    UVA 10655 Contemplation! Algebra
    UVA 10689 Yet another Number Sequence
    HDU 4549 M斐波那契数列
    HDU 4990 Reading comprehension
    CodeForces 450B Jzzhu and Sequences
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/3113044.html
Copyright © 2011-2022 走看看