The Window & Browser APIs

Beyond the page itself, browsers give JavaScript access to the window, the URL, navigation history, the screen, the clipboard, the user's location and much more. This lesson tours the most useful of these Browser Object Model (BOM) and Web APIs.

The window object

window is the global object in browsers. Global variables and functions — document, console, setTimeout, fetch — are all properties of it, so window.setTimeout and setTimeout are the same thing. globalThis refers to the global object in every environment, including Node.js.

matchMedia evaluates CSS media queries from JavaScript — handy for matching behaviour to your responsive breakpoints. It can also notify you of changes with addEventListener("change", …).

location: the current URL

console.log(location.href);      // full URL
console.log(location.pathname);  // "/js-50-the-window-and-browser-apis.html"
console.log(location.search);    // "?tab=2"
console.log(location.hash);      // "#section"

const params = new URLSearchParams(location.search);
params.get("tab");               // "2"

location.assign("/other.html");  // navigate (adds to history)
location.replace("/login.html"); // navigate without a history entry
location.reload();

history: back, forward and clean URLs

Single-page apps change the URL without reloading, using the History API:

history.back();
history.forward();

history.pushState({ page: 2 }, "", "?page=2");  // new URL, no reload
history.replaceState(null, "", "/clean-url");    // change URL, no new entry

addEventListener("popstate", event => {
  // user pressed Back/Forward; event.state is what you pushed
  render(event.state?.page ?? 1);
});

Frameworks' routers (React Router, Vue Router, Angular Router) are built on these two methods. Newer browsers also offer the navigation API, a more capable replacement.

navigator: about the browser and device

Avoid "sniffing" navigator.userAgent to guess the browser — it's unreliable. Instead, check whether a feature exists before using it: if ("geolocation" in navigator) { … }.

Clipboard

Copy buttons on code samples use exactly this. Clipboard access requires a secure (HTTPS) page and usually a user action such as a click; reading the clipboard also asks for permission.

Geolocation

navigator.geolocation.getCurrentPosition(
  position => {
    const { latitude, longitude, accuracy } = position.coords;
    console.log(`You're near ${latitude.toFixed(3)}, ${longitude.toFixed(3)} (±${accuracy}m)`);
  },
  error => console.log("Location unavailable:", error.message),
  { timeout: 10_000 }
);

The browser always asks the user's permission first. Handle the error case — many users say no.

Other APIs worth knowing

IntersectionObserver example