多个iframe自适应高度共用一个滚动条

我在一个页面中有两个iframe,这两个是并列的,一个在左边显示person的数据,一个在右边显示cell的数据,如果被引用的页面数据太大,就会被截掉,但是设置scrolling=“auto”的话,双会出现两个滚动条。在网上查了一下代码,大概有两种方式可以实现

方法一.被引用的页面是静态的高度

js代码
	
//获取被包含的页面的静态高度,来设置iframe的高度
	function setFirstIframeHeight(value){
	if(value=="person"){
	     var personHeight = jQuery('#person').contents().find("meta").attr("content");  
	     jQuery('#person').height(personHeight);
	 }else if(value=="cell"){
	     var cellHeight = jQuery('#cell').contents().find("meta").attr("content");  
	     jQuery('#cell').height(cellHeight);
	  }    
	}


主页面代码
<table class="result" width="100%" cellpadding="0" cellspacing="0">
			<tr>
		    	<td width="49%">
		        	<iframe name="person" id="person" frameborder="0"
				onload="setFirstIframeHeight('person')" scrolling="no" width="100%" height="500">
						</iframe>
		        </td>
		        <td width="2%">&nbsp;</td>
		        <td width="49%">
		        	<iframe name="cell" id="cell" frameborder="0" 
			onload="setFirstIframeHeight('cell')" scrolling="no" width="100%" height="500">
						</iframe>
		        </td>
		    </tr>
</table>

被引用的页面中要加入:
<meta content="text/html; charset=UTF-8; 750px"/>


实现原理是,当主页面中的iframe在加载的时候,调用onload里面的js代码,获取被引入页面的高度,并把这个高度值赋给iframe,这样当被引入的页面的高度超过iframe的高度时,就会在两个iframe的外面出现滚动条

但是这个方法不能获取未知高度的子页面的height值,当被引入的页面高度不能用content:xxxpx来表示时,这个方法就不适用了,于是出现了第二种方法



方法二、利用Interval来实现
<table class="result" width="100%" cellpadding="0" cellspacing="0"> 
<tr> 
    <td width="49%"> 
        <iframe name="person" id="person" frameborder="0" 	scrolling="no" width="100%" height="500"
		onload="this.height=this.contentWindow.document.documentElement.scrollHeight" > 
			<script type="text/javascript"> 
			//动态获取被引用的页面的高度 
			function reinitIframe1(){     
				var iframe = document.getElementById("person");    
				try{     
					var bHeight = iframe.contentWindow.document.body.scrollHeight;     
					var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;     
					var height = Math.max(bHeight, dHeight);     
					iframe.height =  height;     
				}catch (ex){}     
			}     
			window.setInterval("reinitIframe1()", 200); 
			</script>  
			</iframe> 
		</td> 
		<td width="2%">&nbsp;</td> 
		<td width="49%"> 
				<iframe name="cell" id="cell" frameborder="0"  scrolling="no" width="100%" height="500"
					onload="this.height=this.contentWindow.document.documentElement.scrollHeight" > 
					<script type="text/javascript"> 
					//动态获取被引用的页面的高度 
					function reinitIframe2(){     
						var iframe = document.getElementById("cell");    
						try{     
							var bHeight = iframe.contentWindow.document.body.scrollHeight;     
							var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;     
							var height = Math.max(bHeight, dHeight);     
							iframe.height =  height;     
						}catch (ex){}     
					}     
					window.setInterval("reinitIframe2()", 200); 
					</script>  
			</iframe> 
        </td> 
    </tr> 
</table> 

你可能感兴趣的:(JavaScript,jquery,Web)