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

javascript jquery asp.net iframe

2022-08-30 00:35:00

我正在 iframe 中加载 aspx 网页。Iframe 中的内容的高度可以大于 iframe 的高度。iframe 不应该有滚动条。

我在iframe内部有一个包装标签，基本上是所有内容。我写了一些jQuery来调整大小：div

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

其中是包含的 div。TB_windowIframe

body- iframe 中 aspx 的 body 标签。

此脚本附加到 iframe 内容。我从父页面获取该元素。虽然这在Chrome上工作正常，但TB_window在Firefox中崩溃了。我真的很困惑/迷失为什么会发生这种情况。TB_window

答案 1

您可以使用以下命令检索的内容的高度：IFRAMEcontentWindow.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()" ...

不久前我遇到过一种情况，在内部发生表单提交后，我还需要从自身调用。您可以通过在的内容脚本中执行以下操作来实现此目的：iframeLoadedIFRAMEIFRAME

parent.iframeLoaded();

答案 2

对阿里斯托斯的回答略有改进...

<script type="text/javascript">
  function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
  }
</script>

然后在 iframe 中声明，如下所示：

<iframe onload="resizeIframe(this)" ...

有两个小改进：

您不需要通过 document.getElementById 获取该元素 - 因为您已经在 onload 回调中拥有它。
无需在下一个语句中设置“如果要重新分配它”。这样做实际上会产生开销，因为您正在处理DOM元素。iframe.height = ""

编辑：如果框架中的内容始终在更改，则调用：

parent.resizeIframe(this.frameElement);

从更新后的 iframe 中。适用于同一来源。

或自动检测：

  // on resize
  this.container = this.frameElement.contentWindow.document.body;

  this.watch = () => {
    cancelAnimationFrame(this.watcher);

    if (this.lastScrollHeight !== container.scrollHeight) {
      parent.resizeIframeToContentSize(this.frameElement);  
    }
    this.lastScrollHeight = container.scrollHeight;
    this.watcher = requestAnimationFrame(this.watch);
  };
  this.watcher = window.requestAnimationFrame(this.watch);