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