frame标签的一些使用方法

最新推荐文章于 2021-06-19 03:49:33 发布

juststart_LIC

最新推荐文章于 2021-06-19 03:49:33 发布

阅读量1k

点赞数 1

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/mafia_aslan/article/details/79192432

版权

html 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

 感觉iframe标签如果是子页面要自适应高度的话有点难做，主要是用contentWindow这个传值的话，好像谷歌浏览器不行，在火狐下可以，然后后来我用了下面的一种方法，但是如果子页面有数据，不能确定高度的话，还是弄不了，不知道大家是怎么做的呢？以下是我做的一些代码。本来想把高度保存在localStroge里的，后来发现iframe的页面是不同路径下的，然后就没成功。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>导航</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
.information-daohang{
	width:1080px;
	margin:20px auto 0;
	overflow: hidden;
}
.information-daohang-list{
	width: 180px;
	height: 546px;
	float: left;
}
.information-daohang-list ul{
	list-style: none;
}
.information-daohang-list li{
	height:42px;
	line-height: 42px;	
}
#ifo-icon{
	font-size:18px;
	color:#727070;
}
.ifo-icon{
	background:url('../img/list-icon.png') no-repeat left;
	font-size:18px;
	color:#727070;
	padding-left:30px;
}
#leftborder{
	border-left: 5px solid #397cc0;
	color:#397cc0;
}
.information-daohang-list{
	background: #fff;
}
.information-daohang-list li a{
	text-align: center;
	text-decoration: none;
	padding-left: 30px;
	font-size: 16px;
	color: #5d5e5e;
}
.information-daohang-list li a:hover{
	color: #397cc0;
}
.ifo-content{
	width: 862px;
	height: auto;
	float: left;
	margin-left: 20px;
}
.ifo-content iframe{
	width: 100%;
	height: 1500px;
	border: none;
}
</style>
</head>
<body style="background: #ddd">
    <div class="information-daohang">
    	<div class="information-daohang-list">
    		<ul id="informationlist">
    			<li class="ifo-icon">页面</li>
    			<li><a id="leftborder" href="#" target="ifo" name="1">页面1</a></li>
    			<li><a href="#" target="ifo" name="2">页面2</a></li>
    			<li><a href="#" target="ifo" name="3">页面3</a></li>
    			<li><a href="#" target="ifo" name="4">页面4</a></li>
    			<li><a href="#" target="ifo" name="5">页面5</a></li>
    			<li><a href="#" target="ifo" name="6">页面6</a></li>
    			<li><a href="#" target="ifo" name="7">页面7</a></li>
    			<li class="#">页面</li>
    			<li><a href="#" target="ifo" name="8">页面8</a></li>
    			<li class="#">页面</li>
    			<li><a href="#" target="ifo" name="9">页面9</a></li>
    			<li><a href="#" target="ifo"  name="10">页面10</a></li>
    		</ul>
    	</div>

    	<div class="ifo-content"  >
    		<iframe name="ifo" src="about-us.html" scrolling="no" id="ifo">
    			
    		</iframe>
    	</div>
    	
    </div>
    <div>
    		底部
    </div>
    <script>
    	var ifo=document.getElementById("ifo");
    	var ul=document.getElementById("informationlist");
    	var lilist=ul.getElementsByTagName("li");
    	var alist=ul.getElementsByTagName("a");
    	var ul=document.getElementById("CertificateImg");
    	var ulheight=localStorage.ulheight; 
    		for (var i = 0; i <alist.length; i++) {
		    	alist[i].onclick = function () {
		    		//根据a标签的name来设定子页面的高度，需要改良
		    		console.log(ulheight);
		    		if(this.name==1){
		    			ifo.style.height=1500+'px';
		    		}else if(this.name==2){
		    			ifo.style.height=800+'px';
		    		}else if(this.name==3){
		    			ifo.style.height=1040+'px';
		    		}else if(this.name==4){
		    			ifo.style.height=ulheight+'px';
		    		}else if(this.name==5){
		    			ifo.style.height=800+'px';
		    		}else if(this.name==6){
		    			ifo.style.height=870+'px';
		    		}else if(this.name==7){
		    			ifo.style.height=800+'px';
		    		}else if(this.name==8){
		    			ifo.style.height=823+'px';
		    		}else if(this.name==9){
		    			ifo.style.height=800+'px';
		    		}else if(this.name==10){
		    			ifo.style.height=1610+'px';
		    		}
				        for (var j = 0; j < alist.length; j++) {
				            if(alist[j] == this) {
				                this.id="leftborder";
				            } else {
				                alist[j].id="";
				            }
				        }
		    }
		}
		//这个方法可以动态获取子页面的高度，但是在谷歌浏览器下不行，有跨域的提示，需要通过http访问，所以上面用了a标签设定
    	function iframeLoad()  
			{  
			    document.getElementById("ifo").height=0;  
			    document.getElementById("ifo").height=document.getElementById("ifo").contentWindow.document.body.scrollHeight;
			}
		window.οnlοad=function(){
			//iframeLoad();  
		}
		window.οnunlοad=function(){
			localStorage.removeItem("ulheight");
		}
    </script>
</body>
</html>

juststart_LIC

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
frame标签的一些使用方法

感觉iframe标签如果是子页面要自适应高度的话有点难做，主要是用contentWindow这个传值的话，好像谷歌浏览器不行，在火狐下可以，然后后来我用了下面的一种方法，但是如果子页面有数据，不能确定高度的话，还是弄不了，不知道大家是怎么做的呢？以下是我做的一些代码。本来想把高度保存在localStroge里的，后来发现iframe的页面是不同路径下的，然后就没成功。导航.inf
复制链接

扫一扫