Both of these attributes belong to the Browser’s Window object. To be precise, they belong to an inner object known as the location object, and its only job is to know the document’s current location. Changing these location objects’ values typically means changing the document. Because this object defines the URL, and any change in the URL means changing the document for another. Now, the href property and the replace() function do the exact same job but in a different manner.

Let’s break the confusion. Both of these properties are used to go to a new document or a new webpage. However, the “href” property does so by adding a new entry inside the history element, and the “replace” property does by replacing the topmost entry in the history element with the newer URL.

The window.location.href Property

First of all, set up a new homepage with the following line inside it:

In this above code snippet, a button has been created that will be used to go to the second page by using the function buttonClicked() inside the script file.

Running this HTML document gives the following page on the browser:

After that, in the script file or in the <script> tag, use the following lines of code:

This script is going to relocate the browser to the “secondPage.html”. However, secondPage.html doesn’t exist yet. So, create the secondPage.html with the following lines inside it:

Note: This secondPage.html must be created in the same directory as the home.html or the first page.

After that running the main html file and clicking the button will yield the following results:

It is clear from the output that pressing the button will redirect the browser to the second page, and then pressing the back button on the browser’s window will take the browser back to the home page. This is the working of the window.location.href property.

The window.location.replace()

Just like in the href property example, start by creating a new HTML file named home.html and add in the following lines inside it:

After that, add in the following lines in the script tag or in the script file:

In the code snippet, notice that unlike the href property, the replace is actually a function that takes the new location inside its arguments.

After that, create the secondPage.html add in the following lines inside it:

After that, running this home.html will show the following behavior of the browser:

It is clear from the gif above that the replace function replaces the topmost entry in the history of the browser, therefore the browser’s back button is grayed out.

Conclusion

The href property and the replace() function are both part of the window location object. The primary object of both of these is to move the browser to a new webpage which is defined by the URL. The href property adds an element in the history of the browser. Whereas, the replace() function replaces the topmost entry with the new location, causing the browsers to not be able to go back to the previous page.