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


当前回答

在我的项目中,有一个要求,我们已经使动态屏幕,如仪表板的对齐,而加载,它应该显示在整个页面上,应该得到动态调整,如果用户是最大化或调整浏览器的窗口。 为此,我创建了url并使用iframe打开一个用cognos BI编写的动态报告。在jsp中,我们必须嵌入BI报表。我已经使用iframe将该报告嵌入到jsp中。下面的代码在我的情况下工作。

<iframe src= ${cognosUrl} onload="this.style.height=(this.contentDocument.body.scrollHeight+30) +'px';" scrolling="no" style="width: 100%; min-height: 900px; border: none; overflow: hidden; height: 30px;"></iframe>

其他回答

您可以通过使用以下方法检索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();

比起使用javscript/jquery,我发现最简单的方法是:

<iframe style=“min-height:98vh” src=“http://yourdomain.com” width=“100%”></iframe>

这里1vh =浏览器窗口高度的1%。所以要设置的高度理论值是100vh,但实际上是98vh。

在我的项目中,有一个要求,我们已经使动态屏幕,如仪表板的对齐,而加载,它应该显示在整个页面上,应该得到动态调整,如果用户是最大化或调整浏览器的窗口。 为此,我创建了url并使用iframe打开一个用cognos BI编写的动态报告。在jsp中,我们必须嵌入BI报表。我已经使用iframe将该报告嵌入到jsp中。下面的代码在我的情况下工作。

<iframe src= ${cognosUrl} onload="this.style.height=(this.contentDocument.body.scrollHeight+30) +'px';" scrolling="no" style="width: 100%; min-height: 900px; border: none; overflow: hidden; height: 30px;"></iframe>

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

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

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

onload="$(this).height($(this.contentWindow.document.body).find(\'div\').first().height());"
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);
});