iframe高度自适应

最新推荐文章于 2022-08-23 20:11:06 发布

风心

最新推荐文章于 2022-08-23 20:11:06 发布

阅读量101

点赞数 1

分类专栏： JS 文章标签： HTML

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

描述：在parent.html页面上有2个iframe，在加载这2个iframe时，随着内容的多少，页面parent.html的iframe高度能够自适应改变高度。

parent.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 第一个页面 </TITLE>
</HEAD>

<BODY>
<table>
<tr><td>第一个页面</td></tr>
</table>
<iframe name="aIframe" allowTransparency="true" width="100%" src="a.html" frameborder="0"></iframe>
<iframe name="bIframe" allowTransparency="true" width="100%" src="b.html" frameborder="0"></iframe>
</BODY>
</HTML>

a.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> a页面 </TITLE>
</HEAD>

<BODY οnlοad="parentIframeHeight();">
<table>
<tr><td>a页面</td></tr>
<tr><td>a页面</td></tr>
<tr><td>a页面</td></tr>
<tr><td>a页面</td></tr>
<tr><td>a页面</td></tr>
<tr><td>a页面</td></tr>
<tr><td>a页面</td></tr>
<tr><td>a页面</td></tr>
<tr><td>a页面</td></tr>
<tr><td>a页面</td></tr>
</table>
</BODY>
</HTML>
<script language="javascript">
function parentIframeHeight() {
if(top.location != self.location) {
var a = window.parent.document.getElementsByTagName('iframe');
for (var i=0; i<a.length; i++) {
if (a[i].name == self.name) {
if(window.parent.document.getElementById("bIframe")){
//alert(document.body.scrollHeight);
a[i].height = document.body.scrollHeight;
}
}
}
}
}
</script>

b.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> b页面 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY οnlοad="parentIframeHeight();">
<table>
<tr><td>b页面</td></tr>
<tr><td>b页面</td></tr>
<tr><td>b页面</td></tr>
<tr><td>b页面</td></tr>
<tr><td>b页面</td></tr>
<tr><td>b页面</td></tr>
<tr><td>b页面</td></tr>
<tr><td>b页面</td></tr>
<tr><td>b页面</td></tr>
<tr><td>b页面</td></tr>
<tr><td>b页面</td></tr>
</table>
</BODY>
</HTML>

<script language="javascript">
function parentIframeHeight() {
if(top.location != self.location) {
var a = window.parent.document.getElementsByTagName('iframe');
for (var i=0; i<a.length; i++) {
if (a[i].name == self.name) {
if(window.parent.document.getElementById("bIframe")){
//alert(document.body.scrollHeight);
a[i].height = document.body.scrollHeight;
}
}
}
}
}
</script>