What is the use of window.location in javascript?

JavascriptObject Oriented ProgrammingProgramming

Window.location is the location property of a window and it is a reference to a Location object; it represents the current URL of the document being displayed in that window.

Since window object is at the top of the scope chain, so properties of the window.location object can be accessed without window. prefix, for example window.location.href can be written as location.href.

The following section will show you how to get the URL of page as well as hostname, protocol, etc. using the location object property of the window object. You can use the window.location.href property to get the entire URL of the current page.

Windows.location.href property

This is a DOMString containing the entire URL. If changed, the associated document navigates to the new page. It can be set from a different origin than the associated document.


This example of the window.location.href property. In here we are trying to retrieve the URL of the page −

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Get Current URL</title> </head> <body> <script> function getURL() { alert("The URL of this page is: " + window.location.href); } </script> <button type="button" onclick="getURL();">Get Page URL</button> </body> </html>

Windows.location.protocol property

If we click on the button mentioned as ‘Get Page URL’, we will get the output as current URL. Similarly, you can use other properties of the location object such as protocol, hostname, port, pathname, search, etc. to obtain different part of the URL.


Following is the usage of window.location.protocol property −

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Get Different Part of a URL</title> </head> <body> <script> document.write(window.location.protocol + "<br>"); </script> <p><strong>Note:</strong> If the URL does not contain a specific component (e.g., port number, and fragment identifier here), it will be set to ''.</p> </body> </html>

Windows.location.host property

This property represents the host, that is the hostname, a ':', and the port of the URL.


Following example retrieves and prints the host name of the host location in the URL.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Get Different Part of a URL</title> </head> <body> <script> document.write(window.location.host + "<br>"); </script> </body> </html>

The window.location.assign() method

You can use the assign() method of the location object i.e. window.location.assign() to load another resource from a URL provided as parameter. In the example given below we are trying to load new document at the location.


<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Load another Resource from a URL</title> </head> <body> <script> function loadHomePage() { window.location.assign("https://www.tutorialspoint.com"); } </script> <button type="button" onclick="loadHomePage();">Load Home Page</button> <p><strong>Note:</strong> Open the output in a new tab by clicking the arrow next to "Show Output" button then click the above button to see how it works.</p> </body> </html>

The window.location.replace() method

You can also use the replace() method to load new document which is almost the same as assign(). The difference is that it doesn't create an entry in the browser's history, meaning the user won't be able to use the back button to navigate to it. Following is the example of this method.


<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Replace URL with a New URL</title> </head> <body> <script> function HomePage(){ window.location.replace("https://www.tutorialspoint.com"); } </script> <button type="button" onclick="HomePage();">Home Page</button> <p><strong>Note:</strong> Open the output in a new tab by clicking the arrow next to "Show Output" button then click the above button to see how it works.</p> </body> </html>
Updated on 26-Aug-2022 11:57:03