Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
You can redirect a web page to another page in a number of ways including server-side redirects, HTML meta refresh redirects and JavaScript redirects. In this tutorial, we will demonstrate how you can easily redirect a page using JavaScript by giving examples for various scenarios. Before we move on to our examples though, let’s briefly mention about the importance of using such redirects responsibly and only when you really have to.
Interruptive or unexpected web page redirects are considered to be very annoying from the user perspective, since they negatively affect the overall user experience. For example, if you redirect the users to another website as soon as they land on your site, that will obviously cause frustration for them. Also, if you take the users to an irrelevant page after a timer, after they click on a button or image, or after they complete a certain action on your site, that will most probably result in the user wanting to leave your site at once and never come back.
Another reason you should avoid redirects where possible is that the search engines do not favor websites that use redirects, especially if they are deceptive. Your site may even get removed from their index if you have redirects on your website that try to trick the search engine bots or that result in a bad user experience. Having said that, there are also some cases where a redirect can be quite useful based on the context of your web page or a specific feature of your web application and we will leave the decision whether to use a redirect or not, to you.
Keeping the above points in mind, we can now continue with discussing about how JavaScript redirects work.
JavaScript Redirect Methods
You can redirect a web page via JavaScript using a number of methods. We will quickly list them and conclude with the recommended one.
In JavaScript, window.location or simply location object is used to get information about the location of the current web page (document) and also to modify it. The following is a list of possible ways that can be used as a JavaScript redirect:
// Sets the new location of the current window.
window.location = "https://www.example.com";
// Sets the new href (URL) for the current window.
window.location.href = "https://www.example.com";
// Assigns a new URL to the current window.
window.location.assign("https://www.example.com");
// Replaces the location of the current window with the new one.
window.location.replace("https://www.example.com");
// Sets the location of the current window itself.
self.location = "https://www.example.com";
// Sets the location of the topmost window of the current window.
top.location = "https://www.example.com";
Though the above lines of JS code accomplish a similar job in terms of redirection, they have slight differences in their usage. For example, if you use top.location redirect within an iframe, it will force the main window to be redirected. Another point to keep in mind is that location.replace() replaces the current document by moving it from the history, hence making it unavailable via the Back button of the browser.
It is better to know your alternatives but if you want a cross-browser compliant JavaScript redirect script, our recommendation will be to use the following in your projects:
window.location.href = "https://www.example.com";
Simply insert your target URL that you want to redirect to in the above code. You can also check this page to read more about how window.location works. Now, let’s continue with our examples.
JavaScript Redirect: Redirect the Page on Page Load
In order to redirect the user to another website immediately after your website is opened, you can use the following code at the top of your page, within the <head> element. Or, if you are using a separate .js file, put the following code into that file and remember to link to it from the head of your page.
<script> window.location.href = "https://www.example.com"; </script>
Simply replace the example URL with the one you want to redirect to. Note that, with this type of redirection, the visitors will not see your web page at all and be redirected to the target URL instantly.
JavaScript Redirect: Redirect the Page After a Certain Period
In order to redirect the user to another website after a certain time passes, you can use the following code:
<script>
setTimeout(function() {
window.location.href = "https://www.example.com";
}, 3000);
</script>
The above function will redirect the page 3 seconds after it fully loads. You can change 3000 (3 x 1000 in milliseconds) as you wish.
JavaScript Redirect: Redirect the Page After an Event or User Action
Sometimes, you may want to send the user to another page after a certain event or action takes place, such as a button click, an option selection, a layout change, a form submission, a file upload, an image drag, a countdown timer expiration or things like that. In such cases, you can either use a condition check or assign an event to an element for performing the redirect. You can use the following two examples to give you a basic idea:
<script>
// Check if the condition is true and then redirect.
if ( ... ) {
window.location.href = "https://www.example.com";
}
</script>
The above code will do the redirection if the condition is true.
<script>
// onclick event is assigned to the #button element.
document.getElementById("button").onclick = function() {
window.location.href = "https://www.example.com";
};
</script>
The above code will do the redirection when the user clicks the #button element.
This is how JavaScript redirect basically works. We hope that the above examples will help you while handling your web page redirects.
