Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Get Global Variables with JavaScript

By  on  

Updated 9/1/2015: My original method, keys(window) gave unhelpful results in browsers other than Chrome. I've updated this post with a more reliable method.

JavaScript globals are considered bad.  And as a contributor to the MooTools project, I've heard this on a daily basis for the better part of a decade.  MooTools got knocked for extending natives but also for placing objects in the global space, like Browser and $$.  I find the "global vars are terrible" philosophy a bit funny since even jQuery and JavaScript loaders use a global variable.

Intentional globals aside, leaking global variables is bad practice and a result of sloppy coding.  So how can we see what properties are custom within the global namespace?  It's easier than you think:

// UPDATE:  This method is too naive
// Returns an array of window property names
//keys(window);

// Inject an iframe and compare its `contentWindow` properties to the global window properties
(function() {
	var iframe = document.createElement('iframe');
	iframe.onload = function() {
		var iframeKeys = Object.keys(iframe.contentWindow);
		Object.keys(window).forEach(function(key) {
			if(!(key in iframeKeys)) {
				console.log(key);
			}
		});
	};
	iframe.src = 'about:blank';
	document.body.appendChild(iframe);
})();

You will see some variables there that you know you didn't set, like window, document, top, and location, but the others will have been leaked (or intentional) globals set by custom JavaScript code!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

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
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

Incredible Demos

  • By
    Telephone Link Protocol

    We've always been able to create links with protocols other than the usual HTTP, like mailto, skype, irc ,and more;  they're an excellent convenience to visitors.  With mobile phone browsers having become infinitely more usable, we can now extend that convenience to phone numbers: The tel...

  • By
    MooTools Fun with Fx.Shake

    Adding movement to your website is a great way to attract attention to specific elements that you want users to notice. Of course you could use Flash or an animated GIF to achieve the movement effect but graphics can be difficult to maintain. Enter...

Discussion

  1. jonathan

    GoogleAnalyticsObject :)

  2. Darren

    Am I missing something? All I get is:

    ReferenceError: Can't find variable: keys
  3. Luis Merino

    http://caniuse.com/#search=keys
    You may also use:

    Object.keys(window).join(' ')
  4. Hamburger

    Firefox 40.0.3 and windows 7 do not knows keys: keys is not defined

  5. MaxArt

    keys is a console command for Chrome. It should be equivalent to Object.keys, though.
    But, overall, if you don’t want your variables to be leaked, the best recommendation is to use strict mode.

  6. thinsoldier

    Firefox returns an array of 186 items and Chrome returns an array of 23 items. I think more standardization work is needed.

  7. David Walsh

    All: I’ve updated with a more helpful method!

    • MaxArt

      Oh, that’s actually nice.
      I suggest removing the iframe from the document after logging the differences.

  8. Saiya

    key in iframeKeys may be wrong, iframeKeys.indexOf(key) > -1 works fine

  9. Jap

    So, that is the best option to not use a global variable ?

  10. Valtteri

    This seems to work better:

    {
	let props = []
	let iframe = document.createElement('iframe')
	document.body.append(iframe)
	for (let prop of Object.keys(window)) {
		if (!(prop in iframe.contentWindow)) props.push(prop)
	}
	console.log(props)
	iframe.remove()
}
  11. MarioDelgadoSr

    Just an ever-so-slight improvement on Valterri’s concise suggestion:

    {
	let props = []
	let iframe = document.createElement('iframe')
	document.body.append(iframe)
	for (let prop of Object.keys(window)) {
		if (!(prop in iframe.contentWindow)) props.push(prop)
	}
	console.table(props.sort())
	iframe.remove()
}
  12. Coder
    {
    let props = [],
	    iframe = document.createElement('iframe');

    document.body.append(iframe)

	for (let prop of Object.keys(window)) 
		if (!(prop in iframe.contentWindow)) props.push(prop)
	
	console.table(props.sort())
	iframe.remove()
}
  13. Jon

    Is there supposed to be an iframe somewhere automatically, or does it have to be triggered?

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