Get Global Variables with JavaScript
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!
GoogleAnalyticsObject :)
Am I missing something? All I get is:
In what browser/OS?
http://caniuse.com/#search=keys
You may also use:
Object.keys(window).join(' ')Firefox 40.0.3 and windows 7 do not knows keys: keys is not defined
keysis a console command for Chrome. It should be equivalent toObject.keys, though.But, overall, if you don’t want your variables to be leaked, the best recommendation is to use strict mode.
Firefox returns an array of 186 items and Chrome returns an array of 23 items. I think more standardization work is needed.
All: I’ve updated with a more helpful method!
Oh, that’s actually nice.
I suggest removing the iframe from the document after logging the differences.
key in iframeKeysmay be wrong,iframeKeys.indexOf(key) > -1works fineSo, that is the best option to not use a global variable ?
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() }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() }{ 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() }Is there supposed to be an iframe somewhere automatically, or does it have to be triggered?