我正在加载一个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崩溃了。我真的不明白为什么会发生这种情况。


当前回答

你也可以添加一个重复的requestAnimationFrame到你的resizeIframe(例如来自@BlueFish的答案),它总是在浏览器绘制布局之前被调用,你可以更新iframe的高度,当它的内容已经改变了它们的高度。例如,输入表单,惰性加载内容等。

<script type="text/javascript">
  function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    window.requestAnimationFrame(() => resizeIframe(iframe));
  }
</script>  

<iframe onload="resizeIframe(this)" ...

你的回调应该足够快,对你的整体性能没有太大的影响

其他回答

你也可以添加一个重复的requestAnimationFrame到你的resizeIframe(例如来自@BlueFish的答案),它总是在浏览器绘制布局之前被调用,你可以更新iframe的高度,当它的内容已经改变了它们的高度。例如,输入表单,惰性加载内容等。

<script type="text/javascript">
  function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
    window.requestAnimationFrame(() => resizeIframe(iframe));
  }
</script>  

<iframe onload="resizeIframe(this)" ...

你的回调应该足够快,对你的整体性能没有太大的影响

我发现特洛伊的答案不管用。这是为ajax重新编写的相同代码:

$.ajax({                                      
    url: 'data.php',    
    dataType: 'json',                             

    success: function(data)
    {
        // Put the data onto the page

        // Resize the iframe
        var iframe = $(window.top.document).find("#iframe");
        iframe.height( iframe[0].contentDocument.body.scrollHeight+'px' );
    }
});

您可以通过使用以下方法检索IFRAME内容的高度: contentWindow.document.body.scrollHeight

加载IFRAME后,您可以通过以下操作更改高度:

<script type="text/javascript">
  function iframeLoaded() {
      var iFrameID = document.getElementById('idIframe');
      if(iFrameID) {
            // here you can make the height, I delete it first, then I make it again
            iFrameID.height = "";
            iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
      }   
  }
</script>   

然后,在IFRAME标记上,像这样连接处理程序:

<iframe id="idIframe" onload="iframeLoaded()" ...

我有一个情况在一段时间前,我还需要调用iframeLoaded从IFRAME本身的表单提交后发生。您可以通过在IFRAME的内容脚本中执行以下操作来实现这一点:

parent.iframeLoaded();

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

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

当您需要一个不使用jquery的解决方案时,这个选项非常有用。在这种情况下,您应该尝试添加一个容器,并以百分比为其设置填充

HTML示例代码:

<div class="iframecontainer">
    <iframe scrolling="no" src="..." class="iframeclass"width="999px" height="618px"></iframe>
</div>

CSS示例代码:

.iframeclass{
    position: absolute;
    top: 0;
    width: 100%;
}

.iframecontainer{
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 61%;
}