我正在加载一个iframe中的aspx网页。Iframe中的内容的高度可以大于Iframe的高度。iframe不应该有滚动条。

我在iframe里面有一个包装器div标签,基本上是所有的内容。我写了一些jQuery来实现调整大小:

$("#TB_window", window.parent.document).height($("body").height() + 50);

在哪里 TB_window是包含Iframe的div。

Body - iframe中aspx的Body标签。

该脚本附加到iframe内容。我从父页面获得TB_window元素。虽然这在Chrome上工作得很好,但在Firefox中TB_window崩溃了。我真的不明白为什么会发生这种情况。


当前回答

其他答案不适合我,所以我做了一些改变。希望这能有所帮助

$('#iframe').on("load", function() {
    var iframe = $(window.top.document).find("#iframe");
    iframe.height(iframe[0].ownerDocument.body.scrollHeight+'px' );
});

其他回答

对蓝鱼的回答略有改进…

function resizeIframe(iframe) {
    var padding = 50;
    if (iframe.contentWindow.document.body.scrollHeight < (window.innerHeight - padding))
        iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    else
        iframe.height = (window.innerHeight - padding) + "px";
}

这考虑了窗口屏幕(浏览器,手机)的高度,这对响应式设计和具有巨大高度的iframe很好。 填充表示你想要的iframe上方和下方的填充,在这种情况下它贯穿整个屏幕。

以防这能帮到谁。我拽着我的头发试图让这个工作,然后我注意到iframe有一个类入口高度:100%。当我移除这个,一切都按照预期工作。所以,请检查任何css冲突。

脚本

<script type="text/javascript" language="javascript">
    $(document).ready(function(){
        var height = $(window).height();
        $('.myIframe').css('height', height - 200);
    });
</script>

iframe

<iframe class="myIframe" width="100%"></iframe>

我的情况就是这样。

你可以参考相关的问题在这里-如何使iframe的宽度和高度与它的父div相同?

设置动态高度-

我们需要与跨域iFrames和父通信 然后我们可以将iframe的滚动高度/内容高度发送到父窗口

和代码- https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8

我使用jQuery和下面的代码为我工作,

var iframe = $(window.top.document).find("#iframe_id_here");
iframe.height(iframe.contents().height()+'px' );