Synchronize the height of iframe and parent-优快云博客

本文链接：https://blog.youkuaiyun.com/stefli/article/details/3168410

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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".