Though it is a relatively simple task, there are several different ways you can achieve this functionality in your web application. In this article we will look at two popular methods – HTML Redirects, and JavaScript Redirects.
The simplest way to redirect a user to another webpage is using the Meta Refresh tag in HTML. Simply place the following <meta> tag inside the <head> block at the top of any HTML document in your application. For example:
HTML
<head> <meta http-equiv="refresh" content="3; URL=http://codota.com" /> </head>
The above command uses the content attribute to both set the time delay (3 seconds) and the redirect target (http://codota.com). While this is a straightforward way to redirect to a different URL, it has a few disadvantages
that should be noted:
- Older versions of some web browsers do not support the <meta> Refresh tag.
- Users are likely to see the old page before they are redirected, which can create confusion.
- The Back button of the browser is disabled after redirecting using this method.
JavaScript redirects can solve many of these problems.
JavaScript offers several different methods to redirect users to new webpages. These methods are safer, more “controlled”, and are surprisingly simple! We simply need to change the location property of the window object using one of the methods provided below:
JavaScript
window.location = "http://codota.com";
window.location.href = "http://codota.com";
window.location.assign("http://codota.com");
window.location.replace("http://codota.com");
Let’s look more closely at each of these methods.
The top three methods all produce the same result, navigating the user to the new URL when executed.
The fourth method, replace, replaces the current document. The document is replaced by removing it from the browser’s history, disabling the Back button in the process. You will want to keep this last point in mind when deciding on the redirect method you choose.
One quick tip – as the window object is implied in JavaScript, you can simply use location instead of window.location. You can also use self or top in place of window, enhancing your code’s readability.
All of these methods can be easily implemented and used in functions in your application, and do not necessarily need to occur on page load by default. For example, let’s say you want to redirect users to a new page in 10 seconds after they hit a Download button. You could use code like the following:
HTML
<button onclick="handleDownloadBtn()">Download!</button>
JavaScript
function handleDownloadBtn() {
startDownload();
setTimeout('location.assign("http://codota.com")', 10000);
}
This code is pretty straightforward and easy to replicate. The <button> tag has an onclick attribute that invokes the handleDownloadBtn() function, which does two things:
- It invokes the startDownload() function.
- It uses one of JavaScripts’s built-in methods, setTimeout, to redirect the user to the new webpage 10 seconds (10k milliseconds) after the button was clicked.
With this mechanism, you can have fine-grained control over your redirects, ensuring your users are always seeing the most applicable information.
Related Articles:
JavaScript – How to Use setTimeout
JavaScript – How to Format Date
JavaScript – How to Use setAttribute
Explore recent posts
//Explore recent posts
//
2 -min read
4 -min read
32 -min read
More How-to's
//3 -min read
4 -min read
5 -min read