javascript - 根据内部内容使 iframe 高度动态化- JQUERY/Javascript

Question

我正在 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 上运行良好，但 TB_window 在 Firefox 中崩溃了。我真的很困惑/不知道为什么会这样。

Answer 1

您可以使用以下方法获取 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()" ...

不久前，我遇到了一种情况，在其中发生表单提交后，我还需要从 IFRAME 本身调用 iframeLoaded。您可以通过在 IFRAME 的内容脚本中执行以下操作来完成此操作:

parent.iframeLoaded();