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

How to resize iframe height dynamically based on element height?

本文关键字:高度 动态 iframe 调整 元素 何根      更新时间:2023-09-26

我正在与父/容器页面位于同一域/协议内的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中会崩溃。我真的不明白为什么会发生这种事。

有人能为我如何更好地处理这种情况提供建议吗??我们将非常感谢您的帮助感谢

您必须使用管理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;

在父页面和子页面中

如果差异没有那么大,可以添加

overflow:hidden

到css类

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