The location object is used in both browser object model (BOM) and document object model (DOM). The window.location method and the document.location method point to the same object; it gives the information and navigation functionality of the currently loaded webpage. With properties and methods of the location object, discrete segments of URL can be accessed and manipulated. The methods and properties given below are not standardized but all major browsers support them.
The hash property sets or returns a ‘# ‘part or anchor part of the URL. When this property is set, do not use ‘#’ with the anchor part. However the property returns anchor part with ‘#’ symbol. This property does not reload the page but takes the page to the location set to ‘hash’ itself.
Syntax for hash property
var anch = location.hash; //Returns hash, Output: #splice
location.hash = “concat”; //Sets hash to #concat
The host property sets or returns the host name and port number of the URL. In some browsers, port number is not displayed for default port name like 8080.
Syntax for host property
var hostNum = location.host; //Returns hostname
// output: "www.brenkoweb.com"
location.host = hostname:port; //Sets host property.
The hostname property sets or returns hostname of the URL.
Syntax for hostname property
var hostNam = location.hostname; //Returns hostname
// output: "www.brenkoweb.com"
location.hostname = “host_name”; //Sets hostname property.
The href property sets or returns entire URL of the current page. To set the URL, possible values can be:
- Absolute URL - absolute URL pointing to other website (Example: location.href = “http://www.frontendprogrammers.com”)
- Relative URL - relative URL pointing to file within a website (Example: location.href = “page1.html”)
- Anchor URL - anchor URL pointing an anchor within a page (Example: location.href = “#top”)
Syntax for href property
var url = location.href; //Returns href
location.href = “URL”; //Sets href property; URL can be anything explained above.
The origin property returns protocol, hostname, and port number of the URL. If the port number is default, it is not displayed by few browsers. This property is read onlyand it is not supported by IE (as of writing this tutorial).
Syntax for origin property
var o = location.origin; //Returns origin
The pathname property sets or returns pathname of the URL.
Syntax for pathname property
var url = location.pathname; //Returns pathname
// output: "/manipulation-methods-concat-slice-splice#splice"
location.pathname = “path_name”; //Sets pathname
The port property sets or returns port number of a the URL. If the port number is default, nothing is returned.
Syntax for port property
var p = location.port; //Returns port number
location.port = port_num; //Sets port number
The protocol property sets or returns protocol of the current URL. While returning protocol it includes the colon “:”. Possible values are: file: , ftp: , http: , https: , mailto: …etc.
Syntax for protocol property
var p = location.protocol; //Returns protocol as http:
location.protocol = protocol_name; //Sets protocol.
The search property sets or returns query string part of the URL (i.e. part of URL after ‘?’). While returning querystring part of URL it includes ‘?’.
Syntax for search property
// Assume URL is "http://www.imaginarysite.com/?search=location+properties"
var q = location.search; //Returns search property
location.search = “?q=query_string”; //Sets search property
The location object methods can be used to change the browser location. Following methods are used in location object:
The assign() method changes the current URL to new URL passed to it and makes an entry in browser’s history stack. This method is same as setting URL using window.location() or location.href. With this method also, a user can navigate to previous page by using back button.
Example of assign() method in location object
The reload() method reloads the same document. By default, it reloads the document from cache, but by setting forceGet parameter to true as location.reload(true), page is reloaded from the server directly.
Example of reload() method in location object
The replace() method replaces the current webpage with the given new one. This method removes the current webpage from document history and replaces it with the new web page, hence it is not possible to navigate to old webpage with back button.
Example of replace() method in location object