自动调整iframe的大小，以动态更改高度（较小或较大）

Question

我知道有很多关于调整iframe大小的文章，但是我发现的只是这段代码：

<script type="text/javascript" language="JavaScript">
<!--            
        function autoResize(id) {
            var newheight;
            var newwidth;

            if (document.getElementById) {
                newheight = document.getElementById(id).contentWindow.document.body.scrollHeight;
                newwidth = document.getElementById(id).contentWindow.document.body.scrollWidth;
            }
            document.getElementById(id).height = (newheight);
            document.getElementById(id).width = (newwidth);
        };
//-->
</script>

这是示例标记代码：

<a href="index.php" target="content">Home</a>
<a href="profile.php" target="content">Profile</a>

<iframe src="index.php" name="content" height="500px" width="100%" id="Main_Content" onload="autoResize('Main_Content');"></iframe>

上面的那些代码正在工作，但是我有一个问题。 考虑这种情况：

index.php page height is 800px

和

profile.php page height is 1200px

当我单击index.php页面的链接时，iframe的大小调整为800px ，然后我单击profile.php页面的链接，并将iframe大小调整为1200px但这是我的问题，当我再次单击index.php的链接时index.php的高度小于profile.php页面， iframe不能调整大小，也无法适应800px高度，并且它导致index.php内容的下方有多余的空间，效果不好，我没有增加iframe高度时出现问题，但在缩小时却遇到了麻烦，有人可以帮我吗？ 任何帮助表示赞赏。 谢谢！

Answer 1

为什么不做：

height: auto;
max-height: 1200px;

在iframe本身的style =“”内，或通过CSS文档。

如果将height设置为auto，则index.php无需使用1200px。 但是在显示profile.php时，允许使用最大1200px。

Answer 2

我重现了问题。

问题似乎是使用scrollHeight和scrollWidth，它们有意返回滚动条的当前或所需空间，该空间不等于文档本身的大小。

当我改变时，问题对我来说消失了

 newheight = document.getElementById(id).contentWindow.document.body.scrollHeight;
 newwidth = document.getElementById(id).contentWindow.document.body.scrollWidth;

进入

 newheight = document.getElementById(id).contentWindow.document.body.style.height;
 newwidth = document.getElementById(id).contentWindow.document.body.style.width;

这对您可行，还是不受您控制？