• Skip to main content
  • Skip to secondary navigation
  • Skip to footer

recoveryArea

Content Management for Everyone!

  • About me
  • Blog
  • AB Testing
  • WordPress
  • Portfolio

Archives for March 2023

How To List User Defined Window Globals with Javascript

17 March 2023 By iPasqualito

There might be occasions where you want to inspect what is defined on the Window object, for instance is jQuery or Google Analytics loaded, or are there third party scripts that pollute your global Window scope?

In that case this script might come in handy. If you run it in your browsers console, it will create an object containing all user defined globals, nicely subdivided by type.

Wrap your code in an IIFE so we don’t do any polluting ourselves.

It works as follows: first, we declare 2 arrays, one empty called ‘filteredPropKeys’ and one that hold all the property names from the globals on Window called ‘allWindowPropKeys’. What we also need is an empty object that will hold all the user defined globals, let’s call it ‘customProperties’.

// create an iframe and append to body to load a clean window object
let filteredPropKeys,
	allWindowPropKeys = Object.getOwnPropertyNames(win),
	customProperties = {
		array: {},
		object: {}
	},
	iframe = doc.createElement("iframe");
// hide it just to be sure
iframe.style.display = "none";
// and append to the body
doc.body.append(iframe);

It then creates an iFrame element so we have a clean reference Window object. The iFrame is appended to body, so we can compare the original Window object with the iFrame Window object. Everything that is not defined on the iFrame window object will be added to the ‘filteredPropKeys’ array.

// filter the list against the properties that exist in the iframe
filteredPropKeys = allWindowPropKeys.filter(windowPropKeys => !iframe.contentWindow.hasOwnProperty(windowPropKeys));

When that is done, the cool part happens: We loop through the ‘filteredPropKeys’ array, check the type of the property against Window, and then add it to a corresponding property type on our customProperty object.

// now loop through the keys and make one big object containing all the custom properties
filteredPropKeys.forEach(key => {
	const customPropKey = win[key];
	const type = typeof customPropKey;
	
	if (type === "object") {
		// arrays are objects, too... so a special test is required
		if (Array.isArray(customPropKey)) customProperties.array[key] = customPropKey;
		else customProperties.object[key] = customPropKey;
	} else {
		// make a property for the remaining types
		if (customProperties[`${type}`] === undefined) customProperties[`${type}`] = {};
		customProperties[`${type}`][key] = customPropKey;
	}
});

Finally, we log out the result with some added extra’s, the total number of Window globals, the total number of user defined globals, and the user defined globals themselves.

// write the result to the console.
con.log({
	numWindowProps: allWindowPropKeys.length,
	numCustomProps: filteredPropKeys.length,
	customProperties
});

On this website, this will log out something like you see below. Pretty nice, right?

Here they are, all your user defined globals, nicely divided by type, in a clear overview!

Finally, to keep things clean, we remove the iFrame we just created. And that’s all there is to it!

// clean up
iframe.remove();

Happy coding 😘

Filed Under: Geen categorie

Footer

Office

recoveryArea
Nijverheidstraat 11-1
7511 JM Enschede

KvK: 65594940

Goals

Let's make a more elegant, easy to use internet, accessible for everyone. Let's move forward to an empathic, secular, sustainable future, enabled through science and technology.

Read my full profile

Get in touch

  • GitHub
  • LinkedIn
  • Twitter

Copyright © 2025 · From recoveryArea with