iframe 获得可见大小答案

【问题标题】：Iframe get visible sizeiframe 获得可见大小
【发布时间】：2015-07-31 03:17:01
【问题描述】：

在 iframe 中，我需要弄清楚视觉大小到底是多少（使用 js 或 jquery）。

在此示例中，仅显示 iframe 的一部分。 iframe 大小为 300x300，但 div 会将其限制为 300x100。

<div style="max-width: 300px; max-height: 100px; overflow: hidden">
<iframe width="300" height="300" src="http://www.rapidtables.com/web/tools/window-size.htm" style="border:none"></iframe>
</div>

如何从 iframe 内部检测到实际可见尺寸？

试过

window.clientHeight
window.outerHeight
window.innerHeight
window.availableHeight
$(window).height();

【问题讨论】：

我想这会对你有所帮助：stackoverflow.com/questions/5087278/…
没有。这会给我一个 iframe 的大小，我不需要那个。如您所见，仅显示了 iframe 的一部分。我需要那部分。
你看这里了吗？ stackoverflow.com/questions/735072/…。 "parent.document.body.clientHeight"

标签： javascript jquery html css

【解决方案1】：

首先在 iframe 中添加一个 ID：

<div style="max-width: 300px; max-height: 100px; overflow: hidden">
<iframe id="myIframe"width="300" height="300" src="http://www.rapidtables.com/web/tools/window-size.htm" style="border:none"></iframe>
</div>

然后用 jQuery 获取 iframe 内容的真实高度；

$('#myIframe').contents().find('body').height()

【讨论】：

问题中提到了 .height() 。只需要 iframe 的可见部分。