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

recoveryArea

Content Management for Everyone!

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

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

Pascal Louwes

Me
Creative, resourceful and innovative Front End Developer / User Experience Optimizer. I love to make stuff work, perform and convert better.

Buzzwords
JavaScript, jQuery, User Experience & Conversion Optimization, Web Strategy, Interaction Design, Accessibility, Wordpress Design, Development & Optimization. check out my full profile

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 © 2023 · From recoveryArea with

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT