Question

我有一个iFrame

<iframe src="pageToLoad.html" onLoad="autoResize(this);"></iframe>

以及根据内容

调整iframe大小的脚本

function autoResize(elem) {
    var newheight;
    var newwidth;

    newheight = elem.contentWindow.document.body.scrollHeight;
    newwidth = elem.contentWindow.document.body.scrollWidth;
    elem.style.height = newheight + "px";
    elem.style.width = newwidth + "px";
}

工作得很好！

除非iFrame应小于300px x 150px，否则默认情况下这两个值都会启动我创建了一个jsFiddle来显示问题，似乎300px x 150px是iFrame的默认值。

任何人都知道如何解决这个问题，所以我可以使用尺寸为200px x 670px或980px x 70px的iFrame？

Answer 1

我刚刚意识到我需要先在CSS中设置iFrame的最小宽度和高度（200px x 70px）。如果scrollHeight / scrollWidth返回的值低于默认值（300px x 150px），则返回的值将被应用。

Answer 2

这在我的经验中运作良好，并非基于限制。您可能无法正确管理内容页面的高度和宽度。

请包含pageToLoad.html的来源。

另外：专业提示进行故障排除：在担心javascript之前，首先需要代码iframe的宽度和高度。

例如：

<iframe src="pageToLoad.html" style="height: 50px; width: 50px;"></iframe>

然后，您可以确认您的浏览器允许您小于默认宽度和高度，而无需测试您的JavaScript。确认后，修复您的javascript。

在发布内页之前无法知道，但在iframe加载内页后，内页可能会增长。您还可以尝试弄乱内页正文的高度和宽度。例如，此pageToLoad.html适用于您的自动调整大小方法：

<!DOCTYPE html>
<html>
<head><title>iframe test</title></head>
<body style="height: 50px; width: 50px;">
INNER PAGE
<script>
</script>
</body>
</html>

将iframe调整为小于默认宽度/高度的值

2 个答案: