如何获得iframe的高度和宽度

Question

如何获取iframe的高度和宽度，从中执行脚本 在iframe之外？

我想找到它的尺寸。

Javascript解决方案受到欢迎。

Answer 1

使用JQuery：

$('iframe').height();
$('iframe').width();

修改的 详细说明上面的快速和肮脏的答案。 .height()和.width()会在没有填充，边框或边距的情况下为您提供元素的高度和宽度。

如果要包含填充和边框，则需要使用.innerHeight()和.innerWidth()。示例如下：

$('iframe').innerHeight();
$('iframe').innerWidth();

如果要包含填充和边框以及边距，则需要使用.outerHeight()和.outerWidth()。示例如下：

$('iframe').outerHeight();
$('iframe').outerWidth();

上述方法的链接：
https://api.jquery.com/height/
https://api.jquery.com/innerHeight/
https://api.jquery.com/outerHeight/
https://api.jquery.com/width/
https://api.jquery.com/innerWidth/
https://api.jquery.com/outerWidth/

Answer 2

使用纯javascript：

document.getElementsByTagName('iframe')[0].getAttribute('width');
document.getElementsByTagName('iframe')[0].getAttribute('height');

Answer 3

getBoundingClientRect 返回具有以下键的对象：left、top、right、bottom、x、{{1} }、y 和 width。

height

const { width, height } = document.querySelector("iframe").getBoundingClientRect();

console.log(width, height);