JavaScript - Location Object

Window Location Object

Thelocationobject in JavaScript provides information about the browser’s location, i.e., URLs. It is a built-in property of both thewindowanddocumentobjects. We can access it using eitherwindow.locationordocument.location.

The ‘location’ object contains various properties and methods to get and manipulate the information of the browser’s location (URL).

JavaScript Location Object Properties

We can use the properties of the location object to get information of URL:

hash− This property is used to set or get the anchor part of the URL.
host− This property is used to set or get the hostname or port number of the URL.
hostname− This property is used to set the hostname.
href− This property is used to set or get the URL of the current window.
origin− This property returns the protocol, domain, and port of the URL.
pathname− This property updates or gets the path name.
port− This property updates or gets the port of the URL.
protocol− This property updates or gets the protocol.
search− This property is used to set or get the query string of the URL.

Syntax

Follow the syntax below to access the location object’s properties and methods −

JAVASCRIPT CODE

window.location.property;

JAVASCRIPT CODE

location.property;

You may use the ‘window’ object to access the ‘location’ object.

Here, we have demonstrated the use of some properties of thelocationobject with examples.

Example: Accessing location host property

Thelocation.hostproperty returns the host from the current URL. However, you can also change the host using it.

In the below code, we extract the host from the URL. You can see that it returns ‘www.codescompiler.com’.

try-it-yourself — CodesCompiler

Preview

Output

JAVASCRIPT CODE

The host of the current location is: www.codescompiler.com

Example: Accessing location protocol property

Thelocation.protocolpropery is used to get used in the current URL. You can also use it to update the protocol.

Try the following example to use the location.protocol property -

try-it-yourself — CodesCompiler

Preview

Output

JAVASCRIPT CODE

The protocol of the current location is: https:

Example: Accessing location hostname property

Thelocation.hostnameproperty returns the host name of the current URL. You can use it to the hostname as well.

Try the following example to use location.hostname property

try-it-yourself — CodesCompiler

Preview

Output

JAVASCRIPT CODE

The host name of the current location is: www.codescompiler.com

Example: Accessing location pathname property

Thelocation.pathnameproperty returns the path name of the current location. You can set the path name using it.

try-it-yourself — CodesCompiler

Preview

Output

JAVASCRIPT CODE

The protocol of the current location is: /javascript/javascript_location_object.htm

JavaScript Location Object Methods

We can also use themethodsof the location object to navigation to new URLs −

assign(url)− This method loads a new document at the specified URL.
replace(url)− This method replaces the current document with a new document at the specified URL.
reload()− This method reloads the current document.

JavaScript location assign() method

Thelocation.assign()method takes the URL and changes the URL in the current window. In short, it opens a new web page.

Syntax

Follow the syntax below to use the location.assign() method in JavaScript −

JAVASCRIPT CODE

location.assign();

Example

In the below code, when you click the ‘Go to home page’ button, it will redirect you to the home page of the tutorialpoint website.

try-it-yourself — CodesCompiler

Preview

Location Object Properties List

Here, we have listed all properties of the Location object.

PropertyDescriptionhashIt is used to set or get the anchor part of the URL.hostIt is used to set or get the hostname or port number of the URL.hostnameIt is used to set the hostname.hrefIt is used to set or get the URL of the current window.originIt returns the protocol, domain, and port of the URL.pathnameTo update or get the path name.portTo update or get the port of the URL.protocolTo update or get the protocol.searchTo set or get the query string of the URL.

Location Object Methods List

Here, we have listed all methods of the Location object.

MethodDescriptionassign()To load resources at a particular URL.reload()To reload the web page.replace()To replace the resources of the current webpage with another webpage’s resources.toString()Returns the URL in the string format.