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


Set iframe height to that of internal content (on same domain)

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

内容位于同一个域中，因此(希望吗？)不需要像基于内容调整iframe大小那样复杂的解决方案。

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

我还尝试了如何自动调整iframe的大小而没有运气。

我认为这可能是因为iframe中的页面需要花费一段时间才能加载，因此在设置高度时尚未完成加载。也许。

1
2
3
4
5
<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";
}

更新：

尝试，没有运气：

1
2
3
4
5
<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事件？

相关讨论

1
2
3
4
5
6
<script type="text/javascript">
    function ajustHeight() {
        $("#myIframe").parent()[0].style.height = ($("#myIframe")[0].scrollHeight + 150).toString() +"px";
    }

<iframe id="myIframe" src="mypage.html" width="100%" height="100%" onload="ajustHeight()"></iframe>

相关讨论

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

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

JS：

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

HTML：

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

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

没有jQuery的：

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