根据里面的内容使 iframe 高度动态化 - JQUERY/Javascript

make iframe height dynamic based on content inside- JQUERY/Javascript(根据里面的内容使 iframe 高度动态化 - 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！