作者：幸福的小馋豆 | 来源：互联网 | 2023-08-25 19:44
1.tab切换不同的iframe显示，我在iframe的onload上写了一个setIframeHeight(iframe)函数，目的是iframe的高度自适应。2.我单独查看嵌入ifr
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：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| |
index.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
| 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| 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[i].index = i;
tabLi[i].Onclick= function(){
for(var j = 0;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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| |
personModify.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| |
personInfo.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
| 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;
} |
京公网安备 11010802041100号