BOM Location Object In JavaScript

Introduction

In this article, we learned about BOM (Browser Object Model) Location and Navigator Object in JavaScript. In my previous article, I explained about Windows object methods and properties. To read this article, click the link.

The BOM (Browser model objects) are:

Windows Object
Navigator Object
Location Object
Screen Object
Storage Object

The Location Object

The Location object window in JavaScript enables it to save the information about the current page location or address (URL), and redirect the browser to a new page.

A location object is part of the window object, it accesses through the windows.location. There is no general standard for the location object, but all major browsers support the location object.

The location object has two features:

Methods and Properties
Methods in Location Object

The following table contains the methods of location objects in JavaScript.

Methods	Description
assign ()	It Loads a new document on a web page.
reload ()	Using location.href property, reload the current document.
replace ()	This replaces the current document with the specified new document. Not possible to go back to the previous document using your browser ‘back’ button.

Examples of Location object Methods

We can see the examples of location methods one by one:

The assign () Method

The location assign () method is used for loading a new document in a new page. It is not possible to go back to the previous document using your browser ‘back’ button.

Syntax

location.assign (URL)

Example

The following programs illustrate the location assign () method in HTML.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>assign()</title>
</head>
<body>
<h2>Location assign() Method</h2>
<button ondblclick="assign()"></button>
<script>
function assign() {
location.assign("www.c-sharpcorner.com"); //loads a new page
}
</script>
</body>
</html>

Output

The reload () Method

This method reloads the current document, used in the location.href property. It's like the refresh button in the browser.

Syntax

location.reload(URL)

Example

The following programs illustrate the location reload () method in HTML.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>reload()</title>
</head>
<body>
<h2>reload() Method</h2>
<button onlclick="reload()">reload</button>
<script>
function reload() {
location.reload(); //reload a page
}
</script>
</body>
</html>

Output

The replace () Method

This replaces the current document with the specified new document. The replace () method in the location object is used to replace the current page with another page.

Syntax

location.replace(URL)

Example

The following programs illustrate the location replace () method in HTML.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>replace()</title>
</head>
<body>
<h2>replace() Method</h2>
<button onlclick="replace()">replace</button>
<script>
function replace() {
location.replace("https://www.c-sharpcorner.com"); //replace the current page to new page
}
</script>
</body>
</html>

Output

Property in Location Object

The following table contains the properties of location objects in JavaScript.

Properties	Description
herf	The location href property in HTML is used to set or redirect the current (URL) of the current page.
hash	The string beginning with # specifies an anchor name in an HTTP URL.
host	It refers to a string that includes the hostname and port strings
hostname	It Provides the domain name, sub-domain name and server name of the web host.
search	It specifies the search area of the URL.
port	It returns the port number of the current page.
pathname	It returns the pathname (URL) and file name (URL) of the current page.

Examples of Location object Properties

We can see the below examples of location object properties.

The href property

The location href property in HTML is used to set or redirect the current (URL) of the current page. The location href returns the full URL of the page and protocol.

Syntax

location.href = URL

Example

The following programs illustrate the location href property.

<!DOCTYPE html>
<html>
<head>
<title>href Property</title>
</head>
<body>
<h2>DOM Location href Property</h2>
<p>
The location href property in HTML is used to set or redirect the current (URL) of the current page.
</p>
<button ondblclick="myhref()">return URL</button>
<p id="value"></p>
<script>
function myhref() {
var href = location.href;
document.getElementById("value").innerHTML = herf; //get the location in the current document
}
</script>
</body>
</html>

Output

The hash property

The location hash property string beginning with # specifies an anchor name in an HTTP URL.

Syntax

location.hash

Example

The following programs illustrate the location hash property.

<!DOCTYPE html>
<html>
<head>
<title>hash Property</title>
</head>
<body>
<h2>Anchor hash Property</h2>
<p id="hash">The location hash property string beginning with # specifies an anchor name in an HTTP URL</p>
<button onclick="myhash()">Click_here</button>
<p id="hash1"> </p>
<script>
function myhash()
{
var has =document.getElementById("hash").hash;
document.getElementById("hash1").innerHTML = has;;
}
</script>
</body>
</html>

Output

The hostname property

The location hostname property is used to return the hostname of the current URL. It contains the server name, domain name, IP address of a URL.

Example

The following programs illustrate the location hostname property.

<!DOCTYPE html>
<html>
<head>
<title>hostname Property</title>
</head>
<body>
<h2>hostname Property</h2>
<button onclick="host()">Click_here</button>
<p id="host1"> </p>
<script>
function host()
{
var host2 =location.hostname;
document.getElementById("host1").innerHTML = host2;;
}
</script>
</body>
</html>

Output

The pathname property

The location pathname property is used to find the path name and file name of the current page.

Syntax

Location.pathname = path

Example

The following programs illustrate the location pathname property.

<!DOCTYPE html>
<html>
<head>
<title>pathname Property</title>
</head>
<body>
<h2>Location pathname Property</h2>
<button ondblclick="mypath()">Click_here</button>
<p id="path"></p>
<script>
function mypath()
{
var p1 = location.pathname;
document.getElementById("path").innerHTML = p1;
}
</script>
</body>
</html>

Output

The Port Property

The location port property returns the port number of the current URL.

Syntax

location.port
location.port = 8090

Example

The following programs illustrate the location hash property.

<!DOCTYPE html>
<html>
<head>
<title>Port Property</title>
</head>
<body>
<h2>Location port Property</h2>
<p><b>Note: </b>If the port number is default (80 for http and 443 for https)</p>
<button ondblclick="port()">Click_here</button>
<p id="path"></p>
<script>
function port()
{
var port2 = location.port;
var p1 = location.port = 8080;
document.getElementById("path").innerHTML = port2;
document.write(p1);
}
</script>
</body>
</html>

Output

Conclusion

In this article, we have seen about location objects in JavaScript. Next article, I will explain other Windows objects. I hope this article was useful to you. Thanks for reading, and keep learning!