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
    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...

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

Incredible Demos

  • By
    MooTools Documentation Search Favelet

    I'm going to share something with you that will blow your mind: I don't have the MooTools documentation memorized. I just don't. I visit the MooTools docs frequently to figure out the order of parameters of More classes and how best to use...

  • By
    JavaScript Speech Recognition

    Speech recognition software is becoming more and more important; it started (for me) with Siri on iOS, then Amazon's Echo, then my new Apple TV, and so on.  Speech recognition is so useful for not just us tech superstars but for people who either want to work "hands...

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!