Redirect to Another Webpage in JavaScript
There are many situations where you might want to redirect users to a different page based on some action they took. For example, if the users deleted a post, you might want to redirect them to the homepage after deletion. In this tutorial, you will learn about different methods that can be used to redirect users to another page with pure JavaScript. You don’t need to use jQuery for simply redirecting users to another webpage.
Redirect Users to Another Webpage Using window.location.href
This is one of the most common techniques for redirecting users to another webpage in pure JavaScript. All you have to do is set the value of window.location.href to the destination URL and you will be good to go.
JavaScript
window.location.href = 'destination_url';There are a couple of things that you need to keep in mind. First, when specifying absolute URLs, you need to start the URL with http:// or https://. You cannot drop the protocol for absolute URLs. Otherwise, the supplied value will be treated as a relative path. The following example will make things clear. We will work with the assumption that we are currently on https://tutorialio.com/javascript.php.
JavaScript
// This will redirect to https://tutorialio.com
window.location.href = "/";
// This will redirect to https://tutorialio.com/google.com
window.location.href = "google.com";
// This will redirect to https://google.com
window.location.href = "https://google.com";
// This will redirect to https://tutorialio.com/php/faqs/
window.location.href = "php/faqs/";Let’s see another example, where the current page is https://tutorialio.com/javascript/faqs/.
JavaScript
// This will redirect to https://tutorialio.com
window.location.href = "/";
// This will redirect to https://tutorialio.com/javascript/faqs/google.com
window.location.href = "google.com";
// This will redirect to https://google.com
window.location.href = "https://google.com";
// This will redirect to https://tutorialio.com/javascript/faqs/php/faqs/
window.location.href = "php/faqs/";
// This will redirect to https://tutorialio.com/php/faqs/
window.location.href = "/php/faqs/";When you are using window.location.href, you will be simulating a link click. This means that the current page will be stored in the session history. In other words, the users will be able to click on the back button to go to the previous page which redirected them.
This can be troublesome in situations where the redirect happened without any user interactions. In such cases, the users will be stuck in a never ending loop if they keep clicking on the back button.
Redirect Users to Another Webpage Using window.location.replace()
If you want to redirect your users to another webpage in a way that simulates an HTTP redirect, using window.location.replace() is your best bet. In this case, the current page will not be stored in the session history. This means that users won’t be stuck in a loop if they press the back button. Here are a few examples for redirecting users to another page using window.location.replace(). The current page before the redirect is https://tutorialio.com/javascript/faqs/.
JavaScript
// This will redirect to https://tutorialio.com
window.location.replace("/");
// This will redirect to https://tutorialio.com/javascript/faqs/google.com
window.location.replace("google.com");
// This will redirect to https://google.com
window.location.replace("https://google.com");
// This will redirect to https://tutorialio.com/javascript/faqs/php/faqs/
window.location.replace("php/faqs/");
// This will redirect to https://tutorialio.com/php/faqs/
window.location.replace("/php/faqs/");You should use window.location.replace() if you don’t want your users to press back button to go to the original page which redirected them. I was not able to visit https://tutorialio.com/javascript/faqs/ by pressing the back button because the page was not stored in session history.
One important point that you should remember is that the redirect will fail in case of a security violation. This generally happens when the script calling window.location.replace() is located on another domain which is different from the domain of the current page.
Redirect Users to Another Webpage Using window.location.assign()
You can also use window.location.assign() in order to redirect users to another page. This method is similar to using window.location.href because it simulates a link click and the current page is stored in the session history. This means that the users will be able to click on the back button in browser to go to the original page that redirected them. Here are a few examples for redirecting users to another page using window.location.replace(). The current page before the redirect is https://tutorialio.com/javascript/faqs/.
JavaScript
// This will redirect to https://tutorialio.com
window.location.assign("/");
// This will redirect to https://tutorialio.com/javascript/faqs/google.com
window.location.assign("google.com");
// This will redirect to https://google.com
window.location.assign("https://google.com");
// This will redirect to https://tutorialio.com/javascript/faqs/php/faqs/
window.location.assign("php/faqs/");
// This will redirect to https://tutorialio.com/php/faqs/
window.location.assign("/php/faqs/");In all these cases, I was able to visit https://tutorialio.com/javascript/faqs/ by pressing the back button because the page was stored in the session history.
Just like window.location.replace(), the redirect with window.location.assign() will fail in case of a security violation. This generally happens when the script calling window.location.assign() is located on another domain which is different from the domain of the current page.
Quick Summary
Let’s recap everything that we have covered in this tutorial.
- You can use
window.location.hrefto redirect users to another page in a way that stores the current page in session history. This will allow users to go back to the original page. - You can also use
window.location.assign()redirect your users to another page. It will also simulate a link click and store the current page in session history. It differs fromwindow.location.replacein the sense that it will fail in case of a security violation. - If you want to redirect users to another page in a way that doesn’t store the current page in session history, you should use
window.location.replace(). This simulates an HTTP redirect and users will not be able to go back to the original page by clicking the back button.
Let me know if there is anything that you would like me to clarify. Also, you are more than welcome to comment if you know other techniques to redirect to another webpage in JavaScript.
Rate this post —
(1 votes, average: 5.00 out of 5)
Loading...