我正在加载一个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中,这对我来说很管用:

onload="this.height=this.contentWindow.document.body.scrollHeight;"

如果你使用jQuery,试试下面的代码:

onload="$(this).height($(this.contentWindow.document.body).find(\'div\').first().height());"

其他回答

为了增加窗口底部似乎被切断的部分,特别是当你没有滚动时,我使用了:

function resizeIframe(iframe) {
    var addHeight = 20; //or whatever size is being cut off
    iframe.height = iframe.contentWindow.document.body.scrollHeight + addHeight + "px";
  }
jQuery('.home_vidio_img1 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery(this).replaceWith(video);
});

jQuery('.home_vidio_img2 img').click(function(){
    video = <iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>;
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img3 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

jQuery('.home_vidio_img4 img').click(function(){
    video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
    jQuery('.home_vidio_img1 img').replaceWith(video);
    jQuery('.home_vidio_img1 iframe').replaceWith(video);
});

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

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

把这个添加到iframe中,这对我来说很管用:

onload="this.height=this.contentWindow.document.body.scrollHeight;"

如果你使用jQuery,试试下面的代码:

onload="$(this).height($(this.contentWindow.document.body).find(\'div\').first().height());"