iframe获取可见大小

Question

在 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();

Answer 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()