How to Redirect to a Different URL with JavaScript

  • 4 min read
  • October 1, 2020
linkedin twitter facebook reddit
linkedin twitter facebook reddit

There are many situations in which you might want to redirect a user to a new URL as they use your application. For example, releasing a new home page in your application to production often requires redirecting traffic from older, defunct home page links to the new page, ensuring the traffic in our application is going where it is needed. This is a fairly simple scenario, but by no means is it comprehensive – there are many reasons why redirecting a user to a different URL might be needed.

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.

HTML Redirect

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 Redirect:

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:

  1. It invokes the startDownload() function.
  2. 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

 

Related Posts

How to Change CSS Using JavaScript

How to Change CSS Using JavaScript

Cascading Style Sheets (CSS) is used to design the layout of a webpage. CSS is a set of structured rules describing the layout of elements in

How to Use the for…in Statement in JavaScript

How to Use the for…in Statement in JavaScript

The for…in statement is used to loop through an object’s properties. Basic for…in loop example The following code demonstrates a basic example using the for…in statement

How to use the for…of Statement in JavaScript

How to use the for…of Statement in JavaScript

The for…of statement was introduced in ECMAScript2015 (ES6) and adds a powerful new type of loop to JavaScript. JavaScript offers many different types of loops, each