如何根据内容设置iframe的高度[重复]

Posted 2023-03-05

【中文标题】如何根据内容设置iframe的高度[重复]

【英文标题】：how to set height of an iframe based on its content [duplicate]

【发布时间】：2014-10-19 07:37:44

【问题描述】：

我正在寻找一种方法来根据 IFRAME 的内容确定其高度。代码结构是这样的：当点击一个按钮时，会打开一个新的模态对话框，其中包含一个 DIV。 IFRAME 将被加载到此 DIV 中。所以我的问题是如何根据 IFRAME 内容设置 IFRAME 高度以及包含 DIV 的外部高度？

我尝试为它的 iframe onload 设置高度，但它始终默认为 150px，我不知道为什么。

【参考方案1】：

如果你可以使用 jQuery，首先使用 outerHeight() 来获取 iframe DOM 中的 iframe 高度（例如通过 body onload 事件调用）（返回一个数字；例如调用 iframeOuterHeight）：

var iframeOuterHeight = $("body").outerHeight();

如果 jQuery 不是一个选项，请使用（在 iframe 主体的 onload 时调用）：

var iframeOuterHeight = document.body.clientHeight;

然后使用：

parent.document.getElementById("MyiframeDiv").style.height = iframeOuterHeight + 'px';

其中 MyiframeDiv 是 iframe 周围的 div 包装器的 ID；您需要使用 parent，因为环绕 iframe 的 div 位于父 DOM 中。

【讨论】：

是否可以用纯 javascript 更改上述代码。我们没有在我们的应用程序中使用 jquery

这将根据父页面的高度设置 iframe 的高度。如果你想根据自身内容的高度来设置iframe的高度，你的答案会变得更加复杂。