Synchronize the height of iframe and parent

最新推荐文章于 2023-12-12 18:47:17 发布

原创最新推荐文章于 2023-12-12 18:47:17 发布 · 554 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #function

Javascript 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种通过JavaScript调整iframe元素高度的方法，确保iframe能够自适应其内容高度，避免出现滚动条的同时保持良好的页面布局。

Just a test!

Tips:
o.height = ifr.h;
can not be changed with:
o.height = o.h;

Parent[iframe.html]

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<style>
body {
    padding: 0px;
    margin: 0px;
}
</style>
<script>
var h;
</script>
</head>
<body onload="test()">
<table border="1">
<tr>
<td>There is a test</td>
</tr>
<tr>
<td><iframe id="ifr" src="content.html" width="100%" frameborder="0" scrolling="no"></iframe></td>
</tr>
</table>
</body>
<script>
function test() {
    var o = document.getElementById("ifr");
    o.height = ifr.h;
}
</script>
</html>

Iframe[content.html]

test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
test<br/>
End<br/>
<script>
var h;
window.onload = function() {
    h = document.body.scrollHeight;
}
</script>

====================================================================================
a simple method to realize it.

function test() {
var o = document.getElementById("ifr");
o.height = o.Document.body.scrollHeight;
}

window.onload = test;

caution: the "o.Document" not "o.document".