如何获取iframe的高度和宽度

Question

How to get the height and width of an iframe , executing a script from outside the iframe ?

I want to find its dimensions.

Javascript solutions welcomed.

Answer 1

Using pure javascript:

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

Answer 2

Using JQuery:

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

Elaborating on the quick and dirty answer above. .height() and .width() will give you the element's height and width without the padding, border or margin.

If you want to include the padding and the border you will need to use .innerHeight() and .innerWidth() . Example below:

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

If you want to include the padding and the border AND the margin you will need to use .outerHeight() and .outerWidth() . Example below:

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

Links to the methods above:
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 returns an object with the following keys: left , top , right , bottom , x , y , width und 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>