Detect <iframe> height and width from inside the iframe

Question

I doubt this is actually possible but Im prepared to be corrected.

What I need is to be able to detect the width and height of an iframe from within the iframe, so if the iframe src is iframeContent.html I need to be able to surface the values on this page.

I have no control over the page that hosts the iframe only the contents of the iframe.

Is this possible?

Answer 1

Nowadays this is as simple as:

<script>
  console.log(innerWidth, innerHeight)
</script>

Just make sure to load this JavaScript from within the iframe and it will print the iframe window's width and height in the browser's console.

Answer 2

You can always get the web page dimensions, no matter if the page is loaded inside an iframe or a new window it always works the same way. This is a function I've found used to get window dimensions, you can also use it to get an <iframe> dimensions.

function alertSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  window.alert( 'Width = ' + myWidth );
  window.alert( 'Height = ' + myHeight );
}

• source (thanks Andy E for adding the link)
• jsFiddle example