Location

The Location interface represents the location (URL) of the object it is linked to. Changes done on it are reflected on the object it relates to. Both the Document and Window interface have such a linked Location, accessible via Document.location and Window.location respectively.

Anatomy Of Location

HTML

<span id="href" title="href"><span id="origin" title="origin"><span id="protocol" title="protocol">https:</span>//<span id="host" title="host"><span id="hostname" title="hostname">example.org</span>:<span id="port" title="port">8080</span></span></span><span id="pathname" title="pathname">/foo/bar</span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span>

CSS

html, body { height: 100%; }

html { display: table; width: 100%; }

body { display: table-cell; text-align: center; vertical-align: middle; font-family: Georgia; font-size: 200%; line-height: 1em; white-space: nowrap; }

[title] { position: relative; display: inline-block; box-sizing: border-box; line-height: 2em; cursor: pointer; }

[title]:before { content: attr(title); font-family: monospace; position: absolute; top: 100%; width: 100%; left: 50%; margin-left: -50%; font-size: 40%; line-height: 1.5; background: black; }

[title]:hover:before, :target:before { background: black; color: yellow; }

[title] [title]:before { margin-top: 1.5em; }

[title] [title] [title]:before { margin-top: 3em; }

[title] [title] [title] [title]:before { margin-top: 4.5em; }

[title]:hover, :target { position: relative; z-index: 1; outline: 50em solid rgba(255, 255, 255, .8); }

JavaScript

document.body.addEventListener('click', function (evt) {
    evt.preventDefault();

    window.location.hash = evt.target.hasAttribute('id')
        ? '#' + evt.target.getAttribute('id')
        : '';
});

Result

Properties

Location.ancestorOrigins

Is a static DOMStringList containing, in reverse order, the origins of all ancestor browsing contexts of the document associated with the given Location object.

Location.href

Is a stringifier that returns a USVString containing the entire URL. If changed, the associated document navigates to the new page. It can be set from a different origin than the associated document.

Location.protocol

Is a USVString containing the protocol scheme of the URL, including the final ':'.

Location.host

Is a USVString containing the host, that is the hostname, a ':', and the port of the URL.

Location.hostname

Is a USVString containing the domain of the URL.

Location.port

Is a USVString containing the port number of the URL.

Location.pathname

Is a USVString containing an initial '/' followed by the path of the URL, not including the query string or fragment.

Location.search

Is a USVString containing a '?' followed by the parameters or "querystring" of the URL. Modern browsers provide URLSearchParams and URL.searchParams to make it easy to parse out the parameters from the querystring.

Location.hash

Is a USVString containing a '#' followed by the fragment identifier of the URL.

Location.origin Read only

Returns a USVString containing the canonical form of the origin of the specific location.

Methods

Location.assign()

Loads the resource at the URL provided in parameter.

Location.reload()

Reloads the current URL, like the Refresh button.

Location.replace()

Replaces the current resource with the one at the provided URL (redirects to the provided URL). The difference from the assign() method and setting the href property is that after using replace() the current page will not be saved in session History, meaning the user won't be able to use the back button to navigate to it.

Location.toString()

Returns a USVString containing the whole URL. It is a synonym for Location.href, though it can't be used to modify the value.

Examples

// Create anchor element and use href property for the purpose of this example
// A more correct alternative is to browse to the URL and use document.location or window.location
var url = document.createElement('a');
url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container';
console.log(url.href);      // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
console.log(url.protocol);  // https:
console.log(url.host);      // developer.mozilla.org:8080
console.log(url.hostname);  // developer.mozilla.org
console.log(url.port);      // 8080
console.log(url.pathname);  // /en-US/search
console.log(url.search);    // ?q=URL
console.log(url.hash);      // #search-results-close-container
console.log(url.origin);    // https://developer.mozilla.org:8080

Specifications

Specification
HTML Standard (HTML)
# the-location-interface

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
Location
1
12
1
3
3
1
1
18
4
10.1
1
1.0
ancestorOrigins
20
79
No
No
15
6
4.4
25
No
14
6
1.5
assign
1
12
1
5.5
3
3
1
18
4
10.1
1
1.0
hash
1
12
1
3
≤12.1
1
1
18
4
≤12.1
1
1.0
host
1
12
1
3
≤12.1
1
1
18
4
≤12.1
1
1.0
hostname
1
12
1
3
≤12.1
1
1
18
4
≤12.1
1
1.0
href
1
12
1
3
≤12.1
1
1
18
4
≤12.1
1
1.0
origin
8
12
21
Before Firefox 49, results for URL using the blob scheme incorrectly returned null.
11
Intranet sites are set to Compatibility View, which will emulate IE7 and omit window.location.origin.
15
5.1
≤37
18
21
Before Firefox 49, results for URL using the blob scheme incorrectly returned null.
14
5
1.0
password
No
No
26-45
No
No
No
No
No
26-45
No
No
No
pathname
1
12
1
Before Firefox 53, the pathname property returned wrong parts of the URL. For example, for a URL of http://z.com/x?a=true&b=false, pathname would return "/x?a=true&b=false" rather than "/x".
3
Internet Explorer does not provide the leading slash character in the pathname (docs/Web/API/Location instead of /docs/Web/API/Location).
≤12.1
1
1
18
4
Before Firefox 53, the pathname property returned wrong parts of the URL. For example, for a URL of http://z.com/x?a=true&b=false, pathname would return "/x?a=true&b=false" rather than "/x".
≤12.1
1
1.0
port
1
12
1
3
≤12.1
1
1
18
4
≤12.1
1
1.0
protocol
1
12
1
3
≤12.1
1
1
18
4
≤12.1
1
1.0
reload
1
12
Before Edge 79, if a page added to Trusted Sites contains a cross-origin iframe, then calling reload() from within the iframe reloads the trusted page (in other words, the top page reloads, not the iframe).
1
5.5
If a page added to Trusted Sites contains a cross-origin iframe, then calling reload() from within the iframe reloads the trusted page (in other words, the top page reloads, not the iframe).
3
1
1
18
4
10.1
1
1.0
replace
1
12
1
5.5
3
1
1
18
4
10.1
1
1.0
search
1
12
1
Before Firefox 53, the search property returned wrong parts of the URL. For example, for a URL of http://z.com/x?a=true&b=false, search would return "", rather than "?a=true&b=false".
3
≤12.1
1
1
18
4
Before Firefox 53, the search property returned wrong parts of the URL. For example, for a URL of http://z.com/x?a=true&b=false, search would return "", rather than "?a=true&b=false".
≤12.1
1
1.0
toString
52
12
22
11
Intranet sites are set to Compatibility View, which will emulate IE7 and omit window.location.toString.
?
1
52
52
22
?
1
6.0
username
No
No
26-45
No
No
No
No
No
26-45
No
No
No

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Location