In this tutorial, We understand how to redirect from one page to another using the above methods and also learn what is the difference between these methods. Let’s first understand what these methods do.
window.location.href is the property and it returns the current page URL and if you want to redirect to any other page just pass the new page URL in href property of the window.location like below –
//Redirect to page and Keep the previous page history window.location.href = "http://geekstutorials.com" //Get the current page URL console.log(window.location.href);
Note – window.location.href keeps the current document history in memory. Use location.href if you want to redirect to another webpage and need a back button to navigate back to original source.
The above location.href is the property but window.location.replace is a method that takes URL as a parameter. The replace() method replaces the current URL with the URL specified in the replace method.
//Redirect to new page Window.location.replace("http://geekstutorials.com/contact-us");
As the name suggests “replace” so it replaced the current browse page history with the URL specified when executed so when the user clicks on the back button in the browser it doesn’t redirect to the previous page hence location.replace() doesn’t maintain document history.
This is similar to location.href in terms of functionality but it is a method.it redirects the user from one webpage to another and maintains document history. Using location.assign() when the user clicks on the back button it navigates to the previous page.
//Redirect to specified URL and keep the previous page history window.location.assign("http://geekstutorials.com/about-us");
The window.open() method opens the page in a new tab or new window as per the parameters specified. It takes several parameters and all the parameters are optional the below two parameters are the most popular with window.open –
1.URL – the webpage to open if no value is specified it opens the blank window or tab.
2.target- the target attribute and the following values are supported in this parameter –
- _blank – This is the default. URL is loaded into a new window or tab.
- _parent – URL is loaded into the parent frame.
- _self – URL replaces the current page.
- _top – URL replaces any framesets that may be loaded.
//Redirect user to mentioned URL in a new blank window or tab. window.open("http://geekstutorials.com", "_blank");
Now let summarize the difference among all the above methods in one line with examples –
if I open the “http://geekstutorials.com” page in my browser and then redirect to another page like “http://geekstutorials.com/about-us” using the above methods so what will happen when we click on the back button of the browser.
window.location.href – We can navigate back to the previous page.
window.location.replace() – Browser back button is disabled because document history has only the current page.
window.location.assign() – We can navigate back to the previous page.
window.open() – Back button is disabled because we open altogether a new window or tab.