Window.location is a property that returns a Location object with information about the document’s current location. This Location object represents the location (URL) of the object it is linked to i.e. holds all the information about the current document location (host, href, port, protocol, etc.)
All three commands are used to redirect the page to another page/website but differ in terms of their impact on the browser history.
- The href property on the location object stores the URL of the current webpage.
- On changing the href property, a user can navigate to a new URL, i.e. go to a new webpage.
- It adds an item to the history list (so that when the user clicks the “Back” button, he/she can return to the current page).
- Updating the href property is considered to be faster than using the assign() function (as calling a function is slower than accessing the property).
window.location.href = 'http://www.geeksforgeeks.org';
Note: The following 2 lines of code perform the same purpose.
- The replace function is used to navigate to a new URL without adding a new record to the history.
- As the name suggests, this function “replaces” the topmost entry from the history stack, i.e., removes the topmost entry from the history list, by overwriting it with a new entry.
- So, when the user clicks the “Back” button, he/she will not be able to return to the current page.
- Hence, the major difference between the assign() and replace() methods is that the replace() function will delete the current page from the session history.
- The replace function does not wipe out the entire page history, nor does it make the “Back” button non-functional.
- The assign function is similar to the href property as it is also used to navigate to a new URL.
- The assign method, however, does not show the current location, it is only used to go to a new location.
- Unlike the replace method, the assign method adds a new record to history (so that when the user clicks the “Back” button, he/she can return to the current page).
- However, rather than updating the href property, calling a function is considered safer and more readable.
- The assign() method is also preferred over href as it allows the user to mock the function and check the URL input parameters while testing.
Difference between window.location.replace, window.location.assign and window.location.href properties:
window.location.href window.location.replace window.location.assign It used to return the URL of the current page. It is used to replace the current document. It is used to load a new document. It stores the URL of the current webpage. It does not show the current location. It does not show the current location. It adds a new record to the history list. It does not show a new record to the history list. It adds a new record to the history list. It does not delete the current page from the session history. It deletes the current page from the session history. It does not delete the current page from the session history. It is faster than using the assign(). It is used when the current webpage needs to be removed from the history list. It is safer and more readable than using href.