您的位置：首页 > 其它

frame标签的一些使用方法

2018-01-29 10:43 176 查看

 感觉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.onload=function(){
//iframeLoad();
}
window.onunload=function(){
localStorage.removeItem("ulheight");
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航