如何获取iframe的高度和宽度

Question

如何获得的高度和宽度iframe ，从外面执行脚本iframe ？

我想找到它的尺寸。

欢迎 Javascript 解决方案。

Answer 1

使用纯 javascript：

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

Answer 2

使用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 3

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

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

 <p>Example for iframe dimensions</p> <iframe src="https://www.example.com"></iframe>