Platform under construction

Browser APIs & BOM

Advanced

Screen, Location & History

screen, location and history expose display information, the current URL and browser navigation state.

const url = new URL(window.location.href);
url.searchParams.set("tab", "settings");
history.pushState({}, "", url);

Browser APIs & BOM

URL state should be explicit and deliberate.

location describes the current URL. You can read the path, query string, hash and origin from it.

history lets JavaScript change the URL and respond to back/forward navigation without a full page reload.

screen exposes device screen information, but layout decisions should usually belong to CSS and responsive design.

location

Current page URL information.

URL

Structured way to read and change URLs.

history

pushState, replaceState and popstate navigation.

screen

Screen dimensions and related display information.

Examples

Browser APIs should be used with capability checks, permissions and fallbacks.

Represent UI state in the URL

const url = new URL(location.href);
url.searchParams.set("panel", "details");
history.pushState({ panel: "details" }, "", url);

Changing views with no URL state

activePanel = "details";
render();

// Reloading or sharing the URL loses the view state.

Code patterns

Reusable examples for quick reference.

These examples focus on practical browser APIs: URL state, storage, cookies, clipboard, permissions, observers and offline-capable platform tools.

Read current URL

Use URL for structured parsing.

const url = new URL(window.location.href);
console.log(url.pathname);

Read query parameter

URLSearchParams handles query strings.

const tab = url.searchParams.get("tab");

Push URL state

Add navigation history entry.

history.pushState({ tab: "settings" }, "", "?tab=settings");

Handle back button

Respond to popstate.

window.addEventListener("popstate", event => {
  renderFromUrl();
});

Rules that matter

Treat the browser as a platform.

Browser APIs are powerful because they touch privacy, navigation, storage, permissions and performance. Use them deliberately.

Use URL for parsing

Avoid hand-splitting query strings.

Use pushState for navigable changes

Back button should make sense.

Use replaceState for corrections

Do not create noisy history entries for tiny fixes.

Listen to popstate

Back and forward should update the UI.

Keep URLs meaningful

Shareable state improves usability.

Do not use screen for layout decisions

CSS should handle layout adaptation.

Production thinking

A strong browser API layer makes features feel integrated with the platform instead of bolted onto the page.

Why does this matter?

Good URL state makes applications shareable, bookmarkable and easier to navigate.

Accessibility

History changes should also update headings, focus and visible context where needed.

Production note

Production route handling should keep UI, URL and browser history synchronized.

SEO note

Clean, crawlable URLs are one of the strongest foundations for discoverable content.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Add a second query parameter.
Read location.hash.
Explain when pushState is better than replaceState.

Practice assignment

Do this before moving to the next topic.

Create a URL object.
Read one search parameter.
Describe how history state should update UI.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Screen, Location & History.