javascript - 将 iframe 高度设置为内部内容的高度(在同一域上)

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>