Post
Ask Question

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
  1. location.assign (URL)  
Example
 
The following programs illustrate the location assign () method in HTML.
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>  
  4.     <meta charset="utf-8">   
  5.     <title>assign()</title>   
  6. </head>   
  7. <body>   
  8.     <h2>Location assign() Method</h2>   
  9.     <button ondblclick="assign()"></button>   
  10.     <script>   
  11.         function assign() {   
  12.             location.assign("www.c-sharpcorner.com"); //loads a new page  
  13.         }   
  14.     </script>   
  15. </body>   
  16. </html>   
  17.                       
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
  1. location.reload(URL)  
Example
 
The following programs illustrate the location reload () method in HTML.
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>  
  4.     <meta charset="utf-8">   
  5.     <title>reload()</title>   
  6. </head>   
  7. <body>   
  8.     <h2>reload() Method</h2>   
  9.     <button onlclick="reload()">reload</button>   
  10.     <script>   
  11.         function reload() {   
  12.             location.reload(); //reload a page  
  13.         }   
  14.     </script>   
  15. </body>   
  16. </html>   
  17.                       
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
  1. location.replace(URL)  
Example
 
The following programs illustrate the location replace () method in HTML.
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>  
  4.     <meta charset="utf-8">   
  5.     <title>replace()</title>   
  6. </head>   
  7. <body>   
  8.     <h2>replace() Method</h2>   
  9.     <button onlclick="replace()">replace</button>   
  10.     <script>   
  11.         function replace() {   
  12.             location.replace("https://www.c-sharpcorner.com"); //replace the current page to new page  
  13.         }   
  14.     </script>   
  15. </body>   
  16. </html>   
  17.                       
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
  1. location.href = URL  
Example
 
The following programs illustrate the location href property.
  1. <!DOCTYPE html>   
  2. <html>  
  3. <head>   
  4.     <title>href Property</title>   
  5. </head>   
  6. <body>   
  7.     <h2>DOM Location href Property</h2>   
  8.     <p>   
  9.         The location href property in HTML is used to set or redirect the current (URL) of the current page.   
  10.     </p>   
  11.     <button ondblclick="myhref()">return URL</button>   
  12.     <p id="value"></p>   
  13.     <script>   
  14.         function myhref() {   
  15.             var href = location.href;   
  16.             document.getElementById("value").innerHTML = herf; //get the location in the current document  
  17.         }   
  18.     </script>   
  19. </body>   
  20. </html>   
Output
 
 

The hash property

 
The location hash property string beginning with # specifies an anchor name in an HTTP URL.
 
Syntax
  1. location.hash   
Example
 
The following programs illustrate the location hash property.
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4.     <title>hash Property</title>   
  5. </head>  
  6. <body>  
  7.     <h2>Anchor hash Property</h2>   
  8.     <p id="hash">The location hash property string beginning with # specifies an anchor name in an HTTP URL</p>  
  9. <button onclick="myhash()">Click_here</button>   
  10. <p id="hash1">  </p>  
  11. <script>   
  12.     function myhash()   
  13.     {   
  14.         var has =document.getElementById("hash").hash;   
  15.         document.getElementById("hash1").innerHTML = has;;   
  16.     }   
  17. </script>   
  18. </body>   
  19. </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.
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4.     <title>hostname Property</title>   
  5. </head>  
  6. <body>  
  7.     <h2>hostname Property</h2>   
  8. <button onclick="host()">Click_here</button>   
  9. <p id="host1"> </p>  
  10. <script>   
  11.     function host()   
  12.     {   
  13.         var host2 =location.hostname;   
  14.         document.getElementById("host1").innerHTML = host2;;   
  15.     }   
  16. </script>   
  17. </body>   
  18. </html>  
Output
 
 

The pathname property

 
The location pathname property is used to find the path name and file name of the current page.
 
Syntax
  1. Location.pathname = path  
Example
 
The following programs illustrate the location pathname property.
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4.     <title>pathname Property</title>  
  5. </head>   
  6. <body>   
  7.     <h2>Location pathname Property</h2>   
  8.     <button ondblclick="mypath()">Click_here</button>   
  9.     <p id="path"></p>   
  10.     <script>   
  11.         function mypath()   
  12.         {   
  13.             var p1 = location.pathname;   
  14.             document.getElementById("path").innerHTML = p1;   
  15.         }   
  16.     </script>   
  17. </body>   
  18. </html>   
Output
 
 

The Port Property

 
The location port property returns the port number of the current URL.
 
Syntax
  1. location.port  
  2. location.port = 8090  
Example
 
The following programs illustrate the location hash property.
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4.     <title>Port Property</title>  
  5. </head>   
  6. <body>   
  7.     <h2>Location port Property</h2>   
  8.       <p><b>Note: </b>If the port number is default (80 for http and 443 for https)</p>   
  9.       
  10.     <button ondblclick="port()">Click_here</button>   
  11.     <p id="path"></p>   
  12.     <script>   
  13.         function port()   
  14.         {   
  15.             var port2 = location.port;   
  16.             var p1 = location.port = 8080;  
  17.             document.getElementById("path").innerHTML = port2;   
  18.             document.write(p1);  
  19.         }   
  20.     </script>   
  21. </body>   
  22. </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!


Similar Articles