使基于内容JQUERY内 - / JavaScript的iframe高度动态 [英] make iframe height dynamic based on content inside- JQUERY/Javascript

问题描述

我在iframe装载一个aspx网页。在iFrame中的内容可以比iframe的高度更多的高度。 iframe中不应该有滚动条。

I am loading an aspx web page in an iframe. The content in the Iframe can be of more height than the iframe's height. The iframe should not have scroll bars.

我有一个包装 DIV 标记的iframe这基本上是所有里面的内容。我写了一些jQuery做出调整大小发生：

I have a wrapper div tag inside the iframe which basically is all the content. I wrote some jQuery to make the resize happen :

$("#TB_window", window.parent.document).height($("body").height() + 50);

在哪里
TB_window 是div其中的Iframe 包含

体 - 在iframe的ASPX的body标签

body - the body tag of the aspx in the iframe.

本脚本被附加到iframe中的内容。我正在从父页 TB_window 元素。虽然这工作正常在Chrome，但TB_window在Firefox崩溃。我真的很困惑/丢失了，为什么出现这种情况。

This script is attached to the iframe content. I am getting the TB_window element from the parent page. While this works fine on Chrome, but the TB_window collapses in Firefox. I am really confused/lost on why that happens.

推荐答案

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

You can retrieve the height of the IFRAME's content by using: contentWindow.document.body.scrollHeight

在 IFRAME 加载，然后你可以通过以下步骤改变高度：

After the IFRAME is loaded, you can then change the height by doing the following:

<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 标签，你挂钩这样的处理程序：

Then, on the IFRAME tag, you hook up the handler like this:

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

我有一种情况在不久前，我还需要调用 iframeLoaded 从 IFRAME 本身就是一种形式后， -submission内发生。您可以通过执行 IFRAME 的内容脚本中的以下实现这一目标：

I had a situation a while ago where I additionally needed to call iframeLoaded from the IFRAME itself after a form-submission occurred within. You can accomplish that by doing the following within the IFRAME's content scripts:

parent.iframeLoaded();

这篇关于使基于内容JQUERY内 - / JavaScript的iframe高度动态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！