JavaScript Window Location
The window.location object contains information about the current URL and provides methods to navigate to new pages. It can be used to get URL parts, redirect the browser, and reload the page.
Location Properties
The location object has properties for each part of the URL. These allow you to read and set different parts of the current page's URL.
| Property | Description | Example |
|---|---|---|
| location.href | Full URL | https://example.com:8080/path?q=1#top |
| location.protocol | Protocol | https: |
| location.hostname | Domain name | example.com |
| location.port | Port number | 8080 |
| location.host | hostname:port | example.com:8080 |
| location.pathname | Path | /path |
| location.search | Query string | ?q=1 |
| location.hash | Fragment | #top |
| location.origin | Protocol + host | https://example.com:8080 |
Reading Location Properties
// Reading current location properties
console.log('href: ' + window.location.href);
console.log('protocol: ' + window.location.protocol);
console.log('hostname: ' + window.location.hostname);
console.log('pathname: ' + window.location.pathname);
console.log('search: ' + window.location.search);
console.log('hash: ' + window.location.hash);
// Parsing a URL
const url = new URL('https://example.com:8080/path?name=Alice&age=30#section');
console.log('\nParsed URL:');
console.log('hostname: ' + url.hostname);
console.log('pathname: ' + url.pathname);
console.log('port: ' + url.port);
console.log('search: ' + url.search);
console.log('hash: ' + url.hash);Parsing Query Parameters
The URLSearchParams API provides an easy way to parse and manipulate query string parameters from the location.search property.
Working with Query Parameters
// Parse query parameters
const params = new URLSearchParams('?name=Alice&age=30&city=NYC');
console.log('name: ' + params.get('name'));
console.log('age: ' + params.get('age'));
console.log('city: ' + params.get('city'));
console.log('missing: ' + params.get('missing'));
// Check if parameter exists
console.log('has name: ' + params.has('name'));
console.log('has email: ' + params.has('email'));
// Iterate all parameters
console.log('\nAll params:');
params.forEach(function(value, key) {
console.log(' ' + key + ' = ' + value);
});location.assign()
location.assign() loads a new document. It adds the new page to the browser history, so the user can use the back button to return to the previous page.
Navigation with assign()
// Navigate to a new page (adds to history)
// window.location.assign('https://example.com/new-page');
// Same as setting href:
// window.location.href = 'https://example.com/new-page';
// Same as:
// window.location = 'https://example.com/new-page';
console.log('location.assign(url):');
console.log(' - Loads a new page');
console.log(' - Adds to browser history');
console.log(' - User can click Back');
console.log('\nEquivalent methods:');
console.log(' location.assign(url)');
console.log(' location.href = url');
console.log(' location = url');location.replace()
location.replace() replaces the current page with a new one. Unlike assign(), it does NOT add to the browser history, so the user cannot use the back button to return.
Navigation with replace()
// Replace current page (no history entry)
// window.location.replace('https://example.com/new-page');
console.log('location.replace(url):');
console.log(' - Loads a new page');
console.log(' - Does NOT add to history');
console.log(' - User CANNOT click Back');
console.log(' - Used for redirects after login/logout');
console.log('\nassign() vs replace():');
console.log(' assign -> Back button works');
console.log(' replace -> Back button skips this page');location.reload()
location.reload() reloads the current page from the server or cache.
Reloading the Page
// Reload the current page
// window.location.reload();
// Setting hash (does NOT reload the page)
// window.location.hash = '#section2';
console.log('location.reload():');
console.log(' - Reloads the current page');
console.log(' - May use cached version');
console.log('\nChanging hash:');
console.log(' - location.hash = "#new"');
console.log(' - Does NOT reload the page');
console.log(' - Fires hashchange event');
console.log('\nChanging other properties:');
console.log(' - location.search = "?q=test" -> reloads');
console.log(' - location.pathname = "/new" -> reloads');📝 Note: The window.location object can be used as both a getter and setter. Setting location.href to a new URL is functionally equivalent to calling location.assign(). For security, browsers restrict cross-origin access to location properties of other windows/frames.
Exercise:
What is the difference between location.assign() and location.replace()?