Question

我的页面中嵌入了iframe - 它只是我页面的一部分，而不是整个页面。我正在动态重新加载iframe，并希望根据其中内容的高度调整大小。

内容在同一个域上，所以（希望？）不需要像Resizing an iframe based on content中那样复杂的解决方案。

这是我用来调整大小的代码，但它不起作用。框架重新加载正常，但高度始终保持不变。有人可以建议吗？

我也试过How to autosize an iframe中的顶级解决方案而没有任何运气。

我认为可能是因为iframe中的页面需要一段时间才能加载，所以在设置高度时它还没有完成加载。也许

<iframe frameborder=0 border=0 src="" width="100%" height="400px" name="commentframe" id="commentframe"></iframe>
function reload_frame(uid) {
    document.getElementById('commentframe').src = "comments.html?" + uid;
    document.getElementById('commentframe').height = document.getElementById('commentframe').contentWindow.document.body.scrollHeight + "px";
}

更新

尝试，没有运气：

<iframe frameborder=0 border=0 src="" width="100%" height="400px" name="commentframe" id="commentframe" onload="reload_frame()"></iframe>
function reload_frame() {
        var commentframe = document.getElementById('commentframe');
        commentframe.style.height = (commentframe.scrollHeight + 10).toString() + "px";
}

它会调整iframe的大小，但仅限于其原始高度的+ 10px - 如果内容长于此值，则仍会隐藏。

也许我需要iframe体内的onload事件？

Answer 1

<script type="text/javascript">
    function ajustHeight() {
        $("#myIframe").parent()[0].style.height = ($("#myIframe")[0].scrollHeight + 150).toString() + "px";
    }
</script>
<iframe id="myIframe" src="mypage.html" width="100%" height="100%" onload="ajustHeight()"></iframe>

Answer 2

在现代浏览器和许多文档类型中，scrollHeight将返回由浏览器计算的iframe高度，而不是内容高度，因此在大多数情况下上面的代码段不起作用。

您可以使用以下代码段将iframe设置为内容高度。

JS：

$('#ifm').load(function() {
  $(this).height( $(this)[0].contentWindow.document.body.scrollHeight + 24);
});

HTML：

<iframe id="ifm  src="..."></iframe>

请注意，仅当iframe网址位于包含iframe本身的网页的完全相同的域时，此功能才有效。

Answer 3

没有jquery：

<script type="text/javascript">
    window.onload = function() {
        var iframe = document.getElementById("blogFrame");
        iframe.parentNode.style.height = iframe.scrollHeight + "px";
    }
</script>

将iframe高度设置为内部内容的高度（在同一域上）

3 个答案: