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
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

  • By
    5 More HTML5 APIs You Didn’t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

Incredible Demos

  • By
    MooTools ASCII Art

    I didn't realize that I truly was a nerd until I could admit to myself that ASCII art was better than the pieces Picasso, Monet, or Van Gogh could create.  ASCII art is unmatched in its beauty, simplicity, and ... OK, well, I'm being ridiculous;  ASCII...

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

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!