我正在加载一个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中内容的高度。

document.documentElement.scrollHeight
document.documentElement.offsetHeight
document.body.scrollHeight
document.body.offsetHeight

不幸的是,他们都可以给出不同的答案,这些是不一致的浏览器。如果将正文边距设置为0,则document.body.offsetHeight将给出最佳答案。要得到正确的值,请尝试这个函数;它来自iFrame -resizer库,该库还负责在内容更改或浏览器调整大小时保持iFrame的正确大小。

function getIFrameHeight(){
    function getComputedBodyStyle(prop) {
        function getPixelValue(value) {
            var PIXEL = /^\d+(px)?$/i;

            if (PIXEL.test(value)) {
                return parseInt(value,base);
            }

            var 
                style = el.style.left,
                runtimeStyle = el.runtimeStyle.left;

            el.runtimeStyle.left = el.currentStyle.left;
            el.style.left = value || 0;
            value = el.style.pixelLeft;
            el.style.left = style;
            el.runtimeStyle.left = runtimeStyle;

            return value;
        }

        var 
            el = document.body,
            retVal = 0;

        if (document.defaultView && document.defaultView.getComputedStyle) {
            retVal =  document.defaultView.getComputedStyle(el, null)[prop];
        } else {//IE8 & below
            retVal =  getPixelValue(el.currentStyle[prop]);
        } 

        return parseInt(retVal,10);
    }

    return document.body.offsetHeight +
        getComputedBodyStyle('marginTop') +
        getComputedBodyStyle('marginBottom');
}

其他回答

$(document).height() // - $('body').offset().top

和/或

$(window).height()

参见Stack Overflow问题如何获取body元素的高度。

试着用jQuery找到身体的高度:

if $("body").height()

它没有值,如果Firebug。也许这就是问题所在。

对蓝鱼的回答略有改进…

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上方和下方的填充,在这种情况下它贯穿整个屏幕。

对阿里斯托斯的回答略有改进…

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

然后在iframe中如下声明:

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

有两个小的改进:

您不需要通过document获取元素。getElementById——因为你已经在onload回调中有它了。 不需要设置iframe。Height = ""如果你要在下一个语句中重新赋值。这样做实际上会在处理DOM元素时引起开销。

编辑: 如果帧中的内容总是在变化,那么调用:

parent.resizeIframe(this.frameElement); 

从更新后的iframe内。适用于同一产地。

或自动检测:

  // on resize
  this.container = this.frameElement.contentWindow.document.body;

  this.watch = () => {
    cancelAnimationFrame(this.watcher);

    if (this.lastScrollHeight !== container.scrollHeight) {
      parent.resizeIframeToContentSize(this.frameElement);  
    }
    this.lastScrollHeight = container.scrollHeight;
    this.watcher = requestAnimationFrame(this.watch);
  };
  this.watcher = window.requestAnimationFrame(this.watch);

我发现特洛伊的答案不管用。这是为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有一个类入口高度:100%。当我移除这个,一切都按照预期工作。所以,请检查任何css冲突。