IFRAME contentWindow is null

By  on  

I like clean code so I do what I can to avoid unwanted JavaScript global variables.  I initially thought that keys(window) would give me window property leaks but that didn't work because browsers returned different results, so I moved on to using an IFRAME to compare default window property keys.

When I first tried this method, I got a lame error about an IFRAME element's contentWindow property being null.  Ugh.  It didn't take long to figure out why:  you need to wait until the IFRAME has loaded to get the contentWindow:

var iframe = document.createElement('iframe');
iframe.onload = function() {
	// contentWindow is set!	
};
iframe.src = 'about:blank';
document.body.appendChild(iframe);

Of course you'll want to add the onload event before setting the src.  If you use the load event to check for the contentWindow property, you'll be in business!

Recent Features

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

  • By
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

Incredible Demos

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    Adding Events to Adding Events in MooTools

    Note: This post has been updated. One of my huge web peeves is when an element has click events attached to it but the element doesn't sport the "pointer" cursor. I mean how the hell is the user supposed to know they can/should click on...

Discussion

  1. Sisyphe

    Don’t you need to append your iframe element to a DOM tree so that the browser fetches its target content ? I mean, I know that old IE will load scripts as you parse an “HTML string” but in modern browsers, I thought that the asset does not get loaded until you append the element to a document (and in my opinion this it what makes constructors such as Image() so useful).

  2. Yes, good catch! Updated!

  3. James

    Unfortunately this does not appear to be 100% reliable in chrome (i’m currently using version 62.0.3202.94, but this appears to have been an issue for a while), as sometimes contentWindow can still be null when onload is triggered.

  4. bell.jackit

    This solution worked for me! Thanks a lot!

  5. Sharry Stowell

    Thank you, saved me hours!

    Sharry

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!