JS Window

The window object stands for the browser tab your page lives in. It holds the page itself, the address bar, the browser history, the screen, the timers, and every global variable and function you write. This lesson is the map of that object. The lessons after it zoom into its parts.

// The Global Object

In a browser, window is the global object: the top of everything. Things you have used since the first lesson, like console, setTimeout, and alert, are properties of it. So is the page, as window.document.

// Everything Global Lives on window

A global var or function becomes a property of window. A global let or const does not (you saw this in JS Scope). Because window is the global object, you can leave it off: alert(1) and window.alert(1) are the same call.

var score = 10;
let level = 3;

console.log(window.score, window.level);
console.log(window === globalThis, window.window === window);
console.log(typeof window.document, typeof window.setTimeout, window.console === console);

// The Size of the Window

The page area you can draw in is the viewport. Its size in pixels is window.innerWidth and window.innerHeight. The whole browser window, including toolbars and borders, is window.outerWidth and window.outerHeight.

console.log(window.innerWidth > 0, window.innerHeight > 0);
console.log(typeof window.outerWidth, typeof window.outerHeight);
console.log(typeof window.devicePixelRatio);

The actual values depend on your device and window, so log them yourself to see them. devicePixelRatio says how many physical screen dots make up one CSS pixel: 1 on a basic display, 2 or more on a sharp one.

// Scrolling

window.scrollX and window.scrollY tell you how far the page has scrolled. window.scrollTo(x, y) jumps to a position and window.scrollBy(x, y) moves relative to where you are. Passing an options object with behavior: "smooth" animates it:

window.scrollTo(0, 0);
console.log(window.scrollX, window.scrollY);
console.log(window.pageYOffset === window.scrollY);

// back to the top, smoothly
window.scrollTo({ top: 0, behavior: "smooth" });

// Events on the Window

The window announces things that happen to the page as a whole. You listen with addEventListener:

<p id="out">Resize this window...</p>

<script>
  let count = 0;
  window.addEventListener("resize", function () {
    count++;
    document.getElementById("out").textContent =
      "Resized " + count + " times. Width: " + window.innerWidth;
  });
</script>

// Opening and Closing Windows

window.open(url) opens a new tab or window and returns a reference to it. window.close() closes one, but only a window your own code opened:

const popup = window.open("https://example.com", "_blank");
// later, from the same page:
popup.close();

Browsers block window.open unless it runs because the user did something, like a click. A plain link with target="_blank" is usually the better choice for sending someone to another page.

// Windows Inside Windows

A page can sit inside another page, in a frame. window.parent is the window that contains this one, and window.top is the outermost window. On an ordinary page, all three are the same window.

console.log(window === window.top);
console.log(window.parent === window.top);

// globalThis

Not every JavaScript program runs in a browser. globalThis is the standard name for the global object everywhere: in a browser it is window, and in other places (like Node.js) it is something else. Prefer globalThis in code that might run outside a browser.

// Quick Check

let a = 1;
var b = 2;
console.log(window.a, window.b);

// Try It

▶ Open Playground

1. Click Open Playground and run it. Which of the logged values is different in your browser than in a classmate's?
2. Declare a global var and a global let and show which one appears on window
3. Log window.innerWidth, then change the size of the Result pane and run it again
4. Use window.scrollTo to jump to the top, and write what window.scrollY is afterward