JavaScript Location

JavaScript Window Location

The window.location object provides information about the current page’s URL and allows you to navigate the browser to a new page.

Window Location Object

The window.location object can be accessed directly as location (since window is the global object in browsers).

Key properties of location include:

• location.href: Returns the entire URL of the current page.
• location.hostname: Returns the domain name of the web host.
• location.pathname: Returns the path and filename of the current page.
• location.protocol: Returns the web protocol used (e.g., "http:" or "https:").
• location.search: Returns the query string part of the URL (e.g., "?name=value").
• location.hash: Returns the anchor part of the URL (e.g., "#section1").

Key methods include:

• location.assign(url): Loads a new document at the specified URL.
• location.replace(url): Replaces the current document with a new one at the specified URL. The current page is not saved in session history, so the back button won’t navigate to it.
• location.reload(): Reloads the current page.

Window Location href

The location.href property returns the full URL of the current page. You can also assign a new URL to location.href to navigate to a new page (similar to location.assign()).

// Get the current URL
const currentUrl = window.location.href;
document.getElementById("demo").textContent = `Page location is: ${currentUrl}`;

// Navigate to a new page
// window.location.href = "https://www.example.com";

Window Location hostname

The location.hostname property returns the domain name of the current page’s host.

const currentHostname = window.location.hostname;
document.getElementById("demo").textContent = `Page hostname is: ${currentHostname}`;

Window Location pathname

The location.pathname property returns the path of the current page on the server.

const currentPathname = window.location.pathname;
document.getElementById("demo").textContent = `Page path is: ${currentPathname}`;

Window Location protocol

The location.protocol property returns the web protocol of the page (e.g., "http:" or "https:").

const currentProtocol = window.location.protocol;
document.getElementById("demo").textContent = `Page protocol is: ${currentProtocol}`;

Window Location assign()

The location.assign() method loads a new document. This creates an entry in the browser’s history, so the user can use the back button.

function loadNewDocument() {
  window.location.assign("https://developer.mozilla.org");
}

// HTML would have a button like:
// <button onclick="loadNewDocument()">Load New Document</button>

Consider using location.replace(url) if you don’t want the current page in the browser history.

Working with Query Parameters

The location.search property gives you the query string (e.g., ?name=John&age=30). To easily work with these parameters, you can use the URLSearchParams API:

// Assuming URL is: http://example.com/page?name=Alice&topic=JS
const queryParams = new URLSearchParams(window.location.search);

if (queryParams.has('name')) {
  const name = queryParams.get('name'); // "Alice"
  console.log(`Name from URL: ${name}`);
}

if (queryParams.has('topic')) {
  const topic = queryParams.get('topic'); // "JS"
  console.log(`Topic from URL: ${topic}`);
}

URLSearchParams provides methods like get(), has(), set(), append(), and delete() for easy manipulation of query parameters. You can find more information on MDN Web Docs.