Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is the use of window.location in javascript?
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.
Example
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.
Example
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.
Example
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.
Example
<!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.
Example
<!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>
2K+ Views
