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 givenLocation
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 thehref
property is that after usingreplace()
the current page will not be saved in sessionHistory
, 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 forLocation.href
, though it can't be used to modify the value.
Examples
// location: https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
var loc = document.location;
console.log(loc.href); // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
console.log(loc.protocol); // https:
console.log(loc.host); // developer.mozilla.org:8080
console.log(loc.hostname); // developer.mozilla.org
console.log(loc.port); // 8080
console.log(loc.pathname); // /en-US/search
console.log(loc.search); // ?q=URL
console.log(loc.hash); // #search-results-close-container
console.log(loc.origin); // https://developer.mozilla.org:8080
location.assign('http://another.site') // load another page
Specifications
Specification |
---|
HTML Standard # the-location-interface |
Browser compatibility
BCD tables only load in the browser
See also
- Two methods creating such an object:
Window.location
andDocument.location
. - URL related interfaces:
URL
,URLSearchParams
andHTMLHyperlinkElementUtils