如何根据元素高度动态调整 iframe 高度?

Posted

技术标签:

【中文标题】如何根据元素高度动态调整 iframe 高度?【英文标题】:How to resize iframe height dynamically based on element height? 【发布时间】:2012-02-27 15:55:41 【问题描述】:

我在与父/容器页面相同的域/协议内的 iframe 中加载一个 aspx 网页。 iframe 中的内容有时比 iframe 本身更高。我不想在我的 iframe 上显示滚动条。

我需要根据 iframe 将包含的 aspx 页面内的包装“div”标签调整 iframe 的高度。 以下是我为实现此目的而编写的 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 中崩溃。 我真的很困惑/不知为什么会发生这种情况。

任何人都可以就我如何更好地处理这种情况提供任何建议吗? 您的帮助将不胜感激 谢谢

【问题讨论】:

***.com/questions/754519/… 感谢您的回复...看起来问题是解决如何以完整的父窗口高度显示 iframe。在我的情况下,我将其渲染为类似于“模态”窗口,可以在父窗口周围拖动。 【参考方案1】:

你必须在你的 iframe 上使用管理一些事件

 <iframe id="iframe" src="xyz" onload="FrameLoad(this);"
  onresize="FrameLoad(this);" scrolling="no" frameborder="0">
  </iframe>


   function FrameLoad(ctrl) 
   var the_height = ctrl.contentWindow.document.body.scrollHeight;
   $(ctrl).height(the_height)
 

也可用于跨浏览器

document.domain = document.location.hostname;

在父页面和子页面中

【讨论】:

【参考方案2】:

如果差别不大可以加

overflow:hidden

到 css 类

这不会调整窗口大小,但可能是您正在搜索的内容。

【讨论】:

我已经这样做了...它隐藏了超出 iframe 边框的任何空白区域,但是当内容超出边框/预设高度时,它不会使 iframe 扩展

以上是关于如何根据元素高度动态调整 iframe 高度?的主要内容,如果未能解决你的问题,请参考以下文章

根据内容动态调整 iframe 高度

Angularjs动态调整iframe高度

根据动态内容动态调整 iframe 高度

iFrame 错误地报告内部元素高度

根据内部更改的内容动态调整 jQuery Fancybox 的 iframe 高度

js监听某个元素高度变化来改变父级iframe的高度