Overview of Window Object

In web browsers, the window object acts as the global context for JavaScript. It represents an open window in a browser and serves as the entry point to browser APIs. Behind the scenes, it bundles together properties that control page location, display dialogs, manage storage, handle events, and more. In practice, developers tap into window every day—often without thinking about what else it offers.

Understanding which properties are valid on window ensures your code is both future-proof and cross-browser compatible. The HTML specification defines a core set of properties you can rely on, from location and document to navigator and localStorage. Let’s dive into these valid properties so you know exactly what’s safe to use and why they matter.

Global Variables and Functions

When you declare a variable or function at the top level in a script, it becomes a property of window. For example:

var greeting = 'Hello';
function sayHi() {
  console.log(greeting);
}

is effectively the same as:

window.greeting = 'Hello';
window.sayHi = function() {
  console.log(window.greeting);
};

Key points:

Tip: Avoid polluting the global scope. Wrap your code in modules or IIFEs to keep window lean and predictable.

DOM Related Properties

The window object grants direct access to the document and the broader DOM API. Two of the most commonly used properties are:

You can learn more about how JavaScript interacts with the DOM in what is javascript-dom.

Here’s a quick example:

// Find an element by ID
const mainTitle = window.document.getElementById('main');
// Change its text
mainTitle.textContent = 'Welcome!';

Beyond document, you’ll also find window.navigator, window.screen, and more under the DOM umbrella. These properties let you build responsive, interactive applications that react to user environment and device capabilities.

Browser Information Properties

To tailor features by browser type or screen size, the window object provides:

Example:

if (window.navigator.userAgent.includes('Chrome')) {
  console.log('Running in Chrome');
}
console.log('Screen resolution:', window.screen.width, 'x', window.screen.height);

These properties are standardized and widely supported. When you need to adapt fonts, layouts, or feature sets to match the user’s device, they provide reliable, real-time data.

Storage and History Properties

Managing data on the client relies on these valid window properties:

Sample usage:

// Save a preference
window.localStorage.setItem('theme', 'dark');
// Read it back
const theme = window.localStorage.getItem('theme');
console.log('Theme set to:', theme);

// Navigate back one page
window.history.back();

These built-in objects are part of the spec and safe to use in modern browsers. They work without additional libraries and help you deliver stateful experiences.

Event Handling Properties

The window object also defines event handler properties that you can assign directly:

Here’s a quick setup:

window.onload = function() {
  console.log('Page fully loaded');
};
window.onerror = function(message, source, line) {
  console.error('Error:', message, 'at', source + ':' + line);
};

If you need more control, you can also use addEventListener:

window.addEventListener('resize', () => {
  console.log('Resized to', window.innerWidth, 'x', window.innerHeight);
});

Check out how to run a javascript function on page load for deeper examples and best practices.

Note: Assigning directly to window.onload replaces any existing handler. Use addEventListener to stack multiple listeners safely.

Deprecated and Non-Standard Properties

While the HTML spec defines the core set of window properties, browsers sometimes add proprietary features, and old methods linger:

These properties can appear in your console autocomplete but should be avoided:

if (window.clipboardData) {
  // Only IE supports this
  window.clipboardData.setData('Text', 'Sample');
}

Stick to the standardized list to ensure compatibility. Modern developer tools and MDN documentation are your best guides to the current spec.

Conclusion

The window object is your gateway to browser features, housing everything from global variables to event handlers and storage APIs. By sticking to the officially defined properties—like window.location, window.document, window.localStorage, and the core event handlers—you build code that works predictably across browsers and future releases. Avoid non-standard or deprecated properties to minimize maintenance headaches, and always test in multiple environments.

Armed with this knowledge, you can confidently tap into the right parts of window for your next project. Keep your code organized, stay on the spec, and let window be the powerful ally it was designed to be.

Ready to refine your understanding of browser globals? Dive into the spec, experiment with these properties in a sandbox, and watch your web apps become more robust.