极客观点
项目管理
HarmonyOS
1.tab切换不同的iframe显示，我在iframe的onload上写了一个setIframeHeight(iframe)函数，目的是iframe的高度自适应。
2.我单独查看嵌入iframe的第一个网页personInfo.html和第二个的网页personModify.html内容,高度都是200多.
3.但是查看整个嵌入的页面index.html，第一个加载的iframe的高度是根据加载的网页内容的高度来的,确实是200多，但是第二个iframe的高度却多了好多，变成了650多，不知道是怎么回事，还望指教指教。
4.截图：
代码：
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div class="container">
<div class="section">
<div class="sectionInfo clearfix">
<div class="tab left" id="tab">
<ul>
<li class="active">
<a href="#">查看信息</a>
</li>
<li>
<a href="#">修改信息</a>
</li>
</ul>
</div>
<div class="right myCon" id="myCon">
<iframe class="conHTML active" src="personInfo.html" width="100%" onload="setIframeHeight(this);"></iframe>
<iframe class="conHTML" src="personModify.html" width="100%" onload="setIframeHeight(this);"></iframe>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/index.js" ></script>
</body>
</html>index.css
body,a,span,li,ul,ol,p{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
}
body{
font-family: sans-serif,"微软雅黑";
font-size: 16px;
background-color: #f4f4f4;
}
em{
font-style: normal;
}
a{
color: #fff;
text-decoration: none;
}
li{
list-style: none;
}
.left{
float: left;
}
.right{
float: right;
}
.clearfix::before,.clearfix::after{
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
/**布局
----------------------------------------*/
.container{
width: 100%;
height: auto;
}
.header{
width: 100%;
background-color: #52c3dd;
color: #fff;
}
.headerwarp{
width: 80%;
margin: 0 auto;
height: 70px;
}
.section{
width: 100%;
margin: 20px auto;
}
/**导航
----------------------------------------*/
.headerwarp .logo{
width: 70%;
height: 100%;
text-align: left;
}
/*.logo .logoInfo{
height: 100%;
}*/
/*.logo img{
width: 70px;
height: 70px;
}*/
.logo span{
line-height: 70px;
vertical-align: middle;
font-size: 30px;
}
.user{
width: 30%;
height: 100%;
text-align: right;
}
.user a{
font-size: 16px;
line-height: 70px;
color: #fff;
text-decoration: none;
}
/**主体
----------------------------------*/
.sectionInfo{
width: 80%;
margin: 0 auto;
}
.sectionInfo .tab{
width: 20%;
/*height: 200px;*/
}
.sectionInfo .myCon{
width: calc(100% - 20% - 10px);
}
.tab ul li{
line-height: 50px;
text-align: center;
background-color: #52c3dd;
border-bottom: 1px solid #FFFFFF;
}
.tab ul li:last-child{
border: none;
}
.tab ul li:hover{
background-color: #373E40;
}
.tab ul li:hover a{
color: #fff;
}
.tab ul li.active,.tab ul li.active:hover{
background-color: #373E40;
}
.tab ul li.active a,.tab ul li.active:hover a{
color: #fff;
}
.tab ul li a{
color: #fff;
}
.myCon{
float: right;
}
iframe{
min-height: 200px;
border: none;
display: none;
}
iframe.active{
display: block;
}index.js
window.onload = function(){
//tab切换
var tab = document.getElementById('tab');
var tabLi = document.getElementsByTagName('li');
var con = document.getElementById('myCon');
var conIframe = con.getElementsByClassName('conHTML');
if(tabLi.length != conIframe.length){
return;
}else{
for(var i = 0;i<tabLi.length;i++){
tabLi[i].index = i;
tabLi[i].onclick = function(){
for(var j = 0;j<tabLi.length;j++){
tabLi[j].className = '';
conIframe[j].className = 'conHTML';
this.className = 'active';
conIframe[this.index].className = 'conHTML active';
}
}
}
}
}
function setIframeHeight(iframe){
if(iframe){
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if(iframeWin.document.body){
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
}
personInfo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/personInfo.css"/>
</head>
<body>
<div class="container">
<table cellspacing="0" cellpadding="0" class="userTable">
<tr>
<td><label for="userName">用户名：</label></td>
<td><input type="text" readonly="readonly" id="userName" value="小张"></td>
</tr>
<tr>
<td><label for="nickName">用户昵称：</label></td>
<td><input type="text" readonly="readonly" id="nickName" value="小张"></td>
</tr>
<tr>
<td><label for="question">密保问题：</label></td>
<td><input type="text" readonly="readonly" id="question" value="生日"></td>
</tr>
<tr>
<td><label for="answer">密保答案：</label></td>
<td><input type="text" readonly="readonly" id="answer" value="2017/5/22"></td>
</tr>
</table>
</div>
</body>
</html>personModify.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/personInfo.css"/>
</head>
<body>
<div class="container">
<table cellspacing="0" cellpadding="0" class="userTable">
<tr>
<td><label for="userName">用户名：</label></td>
<td><input type="text" readonly="readonly" id="userName" value="小张"></td>
</tr>
<tr>
<td><label for="password">密码：</label></td>
<td><input type="text" id="password" value=""></td>
</tr>
<tr>
<td><label for="npassword">确认密码：</label></td>
<td><input type="text" id="npassword" value=""></td>
</tr>
<tr>
<td><label for="question">密保问题：</label></td>
<td><input type="text" id="question" value=""></td>
</tr>
<tr>
<td><label for="answer">密保答案：</label></td>
<td><input type="text" id="answer" value=""></td>
</tr>
</table>
</div>
</body>
</html>
personInfo.css
body,a,span,li,ul,ol,p{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
height: auto;
}
body{
font-family: sans-serif,"微软雅黑";
font-size: 16px;
background-color: #f4f4f4;
}
em{
font-style: normal;
}
a{
color: #fff;
text-decoration: none;
}
li{
list-style: none;
}
.container{
width: 100%;
height: auto;
}
.userTable{
width: 50%;
margin: 0 auto;
}
.userTable tr{
line-height: 50px;
}
.userTable tr td:first-child{
color: #52c3dd;
}
.userTable{
text-align: center;
margin-top: 20px;
}
.userTable td{
text-align: center;
vertical-align: middle;
border-bottom: 1px solid #52c3dd;
}
.userTable tr:last-child td{
border: none;
}
.userTable td input{
width: 70%;
line-height: 30px;
vertical-align: middle;
text-align: center;
background-color: #fff;
border-radius: 8px;
outline: none;
border: none;
}