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


当前回答

对蓝鱼的回答略有改进…

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);

你也可以添加一个重复的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)" ...

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

所有其他答案都是正确的,但如果iframe有一些动态内容,如稍后加载的地图,并动态更改iframe滚动高度。我就是这样做到的。

var iFrameID = document.getElementById('idIframe');

intval =  setInterval(function(){
if(iFrameID.scrollHeight == iFrameID.contentWindow.document.body.scrollHeight){
     clearInterval(intval);
}else{
   iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
  }
},500)

我只是将代码包装在setInterval内,它匹配iframe滚动高度与iframe内容滚动高度,然后清除间隔。

简单的解决方案是测量内容区域的宽度和高度,然后使用这些测量值来计算底部填充百分比。

在本例中,测量值为1680 x 720 px,因此底部的填充为720 / 1680 = 0.43 * 100,结果为43%。

.canvas-container {    
    position: relative;
    padding-bottom: 43%; // (720 ÷ 1680 = 0.4286 = 43%)
    height: 0;
    overflow: hidden;   
}

.canvas-container iframe {    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;   
}

当您需要一个不使用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%;
}