我在 parent.html 文件中包含一个 iframe。
我需要根据其内部内容 (child.html) 设置 iframe 的大小。
child.html 将包含一段很长的文本，行中有以下代码
child.contentWindow.document.body.scrollHeight
我得到的大小相当于 iframe 中的可见内容部分，而不是其完整大小(不可见部分)。
知道我做错了什么以及如何解决吗？
---------------------------- parent.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Parent</title>
<script>
window.name = 'parent';
</script>
<style>
body {
}
#childIframe{
}
</style>
</head>
<body>
<iframe id="childIframe" src="child.html" scrolling="no" frameborder="0"></iframe>
<script>
var child = document.getElementById('childIframe');
child.height = child.contentWindow.document.body.scrollHeight + "px";
</script>
</body>
</html>
---------------------------- child.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Child</title>
</head>
<script>
window.name = 'child';
</script>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pretium placerat enim, ut luctus orci porta quis. Suspendisse id dignissim nunc. Aenean non sapien in felis aliquet eleifend. Sed et nisi congue, pharetra ligula accumsan, accumsan diam. Praesent risus est, porttitor ut venenatis et, convallis non orci. Duis viverra finibus est, vel aliquam purus elementum finibus. Nunc ullamcorper rhoncus eros id pulvinar. Nam tellus nulla, pretium quis consequat sit amet, rutrum non augue.
.... very very long text here
</p>
</body>
</html>
最佳答案
首选:
function setHeight()
{
var child = document.getElementById('childIframe');
child.style.height = child.contentWindow.document.body.scrollHeight + "px";
}
或
child.height = child.contentWindow.document.body.scrollHeight;
iframe height 属性没有单位，而 style 属性有。
在加载时执行此操作:
<iframe id="childIframe" src="child.html" scrolling="no" onload="setHeight()" frameborder="0"></iframe>
关于javascript - 如何根据其内部内容设置 iframe 的大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27743071/