Redirect to Another Page with JavaScript
In this tutorial, I will demonstrate how you can redirect a web page to another page with the help of JavaScript by providing simple examples.
You can redirect a web page to any other web page, whether it is on your website or on another website, in a number of ways including HTML meta refresh redirection, server side redirection such as using the .htaccess file or PHP, and client (browser) side redirection using JavaScript.
Before implementing any kind of redirection on your website, please keep in mind that unexpected redirects or redirects that occur in the middle of another action often irritates the visitors. Therefore, you should consider having a redirect only if you have to and only if it would make sense from the user point of view, based on your website or application design.
Now, let's see how we can use JavaScript to redirect a web page to another page by giving a number of examples for different cases.
JavaScript Redirect to Another Page Automatically
If you want to redirect a page (URL1) to another page (URL2) automatically, so that any user that comes to the first page (URL1) will be redirected to the second page (URL2), you can use the following code:
window.location.href = 'URL2';
You need to insert the above code into the first page (URL1). Simply replace URL2 with the URL of your second page. It would be better to put this code inside the <head> element (rather than putting to the bottom of the page), so that the page will be redirected before the browser starts to render the first page.
TIP: If you are using inline JavaScript (i.e. no external .js file), remember to put your JavaScript code within <script></script> tags.
JavaScript Redirect to Another Page After X Seconds
In this example, we will redirect a page to another page after a certain time passes after the page loads. For example, if you want to redirect the visitor to your homepage after displaying a welcome page for 5 seconds (please don't use welcome pages!), you can use the following code:
setTimeout(function(){
window.location.href = 'homepage-url';
}, 5 * 1000);
You need to insert the above JavaScript code into the welcome page. Remember to replace homepage-url with your homepage URL.
As you can see, we used setTimeout method to instruct the script to execute the redirection after 5 seconds. We multiplied 5 by 1000 to convert the seconds to milliseconds.
TIP: In JavaScript, time values are always used as milliseconds in calculations.
JavaScript Redirect to Another Page Based on a Condition
You can also do the redirect based on a certain condition. For example, you can do a redirection based on the browser of the visitor (though it is not recommended), based on the screen size, based on the time of the day, based on an expiration date or any other condition.
Use the following code to redirect your visitors that meet a certain condition:
if (CONDITION) {
window.location.href = 'redirect-url';
}
For example, the following code redirects visitors to another page if their screen width is smaller than 600 pixels:
if (screen.width < 600) {
window.location.href = 'redirect-url';
}
JavaScript Redirect to Another Page Based on User Action
Our final example will demonstrate how to redirect the visitor based on their action. You can bind the redirect to any type of action the user takes but for simplicity, we will use a click on a button as the action in this example.
The following code will redirect the visitor to the target page when the visitor clicks the button, #mybutton:
document.getElementById('mybutton').onclick = function() {
window.location.href = 'redirect-url';
};
You can also do the same thing by using the following inline JS code:
<button onclick="window.location.href = '/'">Go to Homepage</button>
For example if you click the button below, which is not an HTML link, it will send (redirect) you to the homepage of this website. You can try clicking it to see how it works. You can then click the back button of your browser to come back to this page.
Similarly, you can bind the redirect to any event or user action as you want. Just remember to make sure your redirects will not cause a frustrated user experience.
More JavaScript Tips
How to Get Elements By Name in JavaScript How to Download a Text File with JavaScript How to Download a File with JavaScript How to Refresh a Web Page with JavaScript JavaScript Copy Text to Clipboard Tutorial JavaScript Cookies: How to Create a Cookie with Javascript How to Check If File Input is Empty with Javascript
JavaScript Tips