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
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos

  • By
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

  • By
    CSS Vertical Center with Flexbox

    I'm 31 years old and feel like I've been in the web development game for centuries.  We knew forever that layouts in CSS were a nightmare and we all considered flexbox our savior.  Whether it turns out that way remains to be seen but flexbox does easily...

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!