根据内部内容使 iframe 高度动态化 - JQUERY/Javascript [英] 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.

我在 iframe 中有一个包装器 div 标签，它基本上是所有内容.我写了一些 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 是包含 Iframe 的 div.

where TB_window is the div in which the Iframe is contained.

body - 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()" ...

不久前我遇到了一种情况，在发生表单提交后，我还需要从 IFRAME 本身调用 iframeLoaded.您可以通过在 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();

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