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.

Properties of location object

Following segments are listed properties of location object. All of those properties except hash, after being modified, will reload the current page with the new URL path.

hash

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

// assume URL is "http://www.brenkoweb.com/tutorials/javascript/js-arrays/manipulation-methods-concat-slice-splice#splice" 

var anch = location.hash; //Returns hash, Output: #splice

location.hash = “concat”; //Sets hash to #concat

host

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

// assume URL is "http://www.brenkoweb.com/tutorials/javascript/js-arrays/manipulation-methods-concat-slice-splice#splice" 

var hostNum = location.host;  //Returns hostname

// output: "www.brenkoweb.com"

location.host = hostname:port; //Sets host property.

hostname

The hostname property sets or returns hostname of the URL.

Syntax for hostname property

// assume URL is "http://www.brenkoweb.com/tutorials/javascript/js-arrays/manipulation-methods-concat-slice-splice#splice" 

var hostNam = location.hostname;  //Returns hostname

// output: "www.brenkoweb.com"

location.hostname = “host_name”;     //Sets hostname property.

href

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”)
  • New Protocol - URL can be a new prototcol (Examples: location.href=”ftp://brenkoweb.com”; location.href = “mailto:programmer@javascript.com”; location href = “file://host/path/example.txt”;

Syntax for href property

// assume URL is "http://www.brenkoweb.com/tutorials/javascript/js-arrays/manipulation-methods-concat-slice-splice#splice" 

var url = location.href;  //Returns href

// output of url: "http://www.brenkoweb.com/tutorials/javascript/js-arrays/manipulation-methods-concat-slice-splice#splice"

location.href = “URL”; //Sets href property; URL can be anything explained above.

origin

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

// assume URL is "http://www.brenkoweb.com:4000/tutorials/javascript/js-arrays/manipulation-methods-concat-slice-splice#splice" 

var o = location.origin;  //Returns origin

//output: "http://www.brenkoweb.com:4000"

pathname

The pathname property sets or returns pathname of the URL.

Syntax for pathname property

// assume URL is "http://www.brenkoweb.com:4000/tutorials/javascript/js-arrays/manipulation-methods-concat-slice-splice#splice" 

var url = location.pathname;  //Returns pathname

// output: "/manipulation-methods-concat-slice-splice#splice"

location.pathname = “path_name”; //Sets pathname

port

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

protocol

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. 

search

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

//output: "?search=location+properties"

location.search = “?q=query_string”; //Sets search property

Methods of location object

The location object methods can be used to change the browser location. Following methods are used in location object:

assign()

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

reload()

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

replace()

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

 

›› go to examples ››