location
An object with information about the current page’s address. Lets you read its parts and navigate to a different address.
- Returns
- A
Locationobject. Theassign(),replace(), andreload()methods returnundefined.
Example
#console.log(location.href)
console.log(location.origin)
console.log(location.pathname)
console.log(location.search)
console.log(location.hash)
console.log(new URLSearchParams(location.search).get('lesson'))https://codeworlds.com/courses/javascript?lesson=5#exercises https://codeworlds.com /courses/javascript ?lesson=5 #exercises 5
The result is for a page open at https://codeworlds.com/courses/javascript?lesson=5#exercises. The examples on this page run in a frame without its own address, where location.href is about:srcdoc, so this code doesn’t run in the preview.
Definition and usage
#The location object (also available as window.location and document.location) describes the address of the page open in the tab. It has properties similar to the URL object: href (the full address), origin, protocol, host, hostname, pathname, search, and hash. It lacks searchParams, though, so read query parameters with new URLSearchParams(location.search).
Unlike the URL object, changing location triggers navigation. Assigning location.href = "/courses" or calling location.assign() navigates to the new address and adds an entry to the history. location.replace() does the same, but replaces the current entry, so the “Back” button won’t return to the previous page. location.reload() reloads the page.
The exception is hash. Changing just the fragment, e.g. location.hash = "#exercises", doesn’t reload the page, it only scrolls to the element with that id and fires a hashchange event. If you want to change the address without navigating and without scrolling, use history.pushState().
Syntax
#location.href
location.origin
location.pathname
location.search
location.hash
location.href = url
location.assign(url)
location.replace(url)
location.reload()Parameters
#url
string
The target address forassign()andreplace(), absolute or relative.
More examples
#const params = new URLSearchParams(location.search)
const target = new URL(params.get('return') ?? '/panel', location.origin)
if (target.origin === location.origin) {
location.assign(target)
} else {
location.assign('/panel')
}The address from the return parameter is resolved relative to the page’s domain. Checking origin protects against someone slipping in a link that would redirect to a foreign site after signing in.
window.addEventListener('hashchange', () => {
console.log('New section:', location.hash)
})
location.hash = 'exercises'
console.log(location.hash)#exercises New section: #exercises
The address changes right away, and the hashchange event arrives a moment later, which is why its entry comes second. The page doesn’t reload, it only scrolls to the element with id="exercises".
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Use
new URLSearchParams(location.search)to read parameters, instead of slicing the string by hand. - Before redirecting to an address from a parameter, check that it points to your domain. Otherwise someone could slip in a link that sends the user to a foreign site.
- Use
location.replace()after signing out. The “Back” button won’t then lead back into the user’s panel.
Related entries
#- URLAn object for creating, reading, and changing URLs. It breaks an address into parts: protocol, host, path, and parameters.
- URLSearchParamsAn object for reading and building query parameters in an address, the part after the ? character, e.g. ?course=js&page=2.
- history.pushState()Adds a new entry to the browser history and changes the address bar without reloading the page.
- EventTarget.addEventListener()Registers a function that’s called every time a given event occurs on an element, for example a click.
- sessionStorageBrowser storage for key-value pairs that works only in the current tab and disappears when it closes.
Spotted a mistake or missing an example? Write to us.