How can you redirect the browser to a new url from javascript?

What is Page Redirection ?

You might have encountered a situation where you clicked a URL to reach a page X but internally you were directed to another page Y. It happens due to page redirection. This concept is different from JavaScript Page Refresh.

There could be various reasons why you would like to redirect a user from the original page. We are listing down a few of the reasons −

• You did not like the name of your domain and you are moving to a new one. In such a scenario, you may want to direct all your visitors to the new site. Here you can maintain your old domain but put a single page with a page redirection such that all your old domain visitors can come to your new domain.

• You have built-up various pages based on browser versions or their names or may be based on different countries, then instead of using your server-side page redirection, you can use client-side page redirection to land your users on the appropriate page.

• The Search Engines may have already indexed your pages. But while moving to another domain, you would not like to lose your visitors coming through search engines. So you can use client-side page redirection. But keep in mind this should not be done to fool the search engine, it could lead your site to get banned.

How Page Re-direction Works ?

The implementations of Page-Redirection are as follows.

Example 1

It is quite simple to do a page redirect using JavaScript at client side. To redirect your site visitors to a new page, you just need to add a line in your head section as follows.

   
      
   
   
   
      
Click the following button, you will be redirected to home page.
      
      

         
      
      
   

Output

Example 2

You can show an appropriate message to your site visitors before redirecting them to a new page. This would need a bit time delay to load a new page. The following example shows how to implement the same. Here setTimeout() is a built-in JavaScript function which can be used to execute another function after a given time interval.

Output

You will be redirected to tutorialspoint.com main page in 10 seconds!

Example 3

The following example shows how to redirect your site visitors onto a different page based on their browsers.

When an HTTP request for one page automatically goes to another page then it is called redirection. The redirection of a web page is used for different reasons like redirecting to a different domain e.g. when you move your website from one URL to another URL or redirecting to a more recent version of a page you are looking at it. There are many ways to redirect a web page and different web technologies provide different ways like Java provides sendRedirect() and forward() method for redirection. 

The redirection can also be divided into two categories, client side and server side. On the client-side, the redirection client is responsible for routing requests to another URL but in server-side redirection, it's the server's job to redirect to a new page.

JQuery and JavaScript are mostly used for client-side redirection and there are a number of ways to redirect a web page using JavaScript In this tutorial, we'll examine some of the most popular and common ways to redirect a web page using JavaScript and jQuery.

How to redirect a web page using JavaScript

Before looking at the jQuery code, let's first learn how to redirect a web page by using plain JavaScript. It provides several simple ways to achieve this task without loading an external JavaScript library like jQuery.

1. Redirection using window.location.href of Javascript

The most common way to redirect an URL using JavaScript is just setting the href attribute of the window.location object. This simulates normal navigation to a new page. I don't think any task can be simpler than this, just assign a new URL.

For example, if you are redirecting URL A to URL B then just put the URL B here as shown in the following example:

window.location.href="http://newURL.com";

Tip: You should remember that window.location.href loads page from browser's cache and does not always send the request to the server. So, if you have an old version of the page available in the cache then it will redirect to there instead of loading a fresh page from the server.

2. Redirection using replace() function

Another way to redirect to a web page in jQuery is by using the replace() function of the window.location object. This method removes the current URL from the history and replaces it with a new URL. Here is an example of how to use this function for redirection:

window.location.replace("url"); 

Tip: Use the replace() method if you want to want to redirect to a new page and don't allow the user to navigate to the original page using the back button.

3. Redirection using window assign() function

You can also use the window.location.assign() function to redirect a web page using JavaScript. This function adds a new URL to the history stack and redirected to the new URL, which means, unlike replace() function you can use the back button to go back to the original document. Here is how you can use this method to redirect to a new url

window.location.assign("url"); 

Tip: Use the assign() method for redirection if you want to allow the user to use the back button to go back to the original document.

4. Redirection using navigate function

This function is the same as window.location="url" and it also loads the page from the cache instead of directly requesting it from the server. Here is an example to use the navigate() function for redirection to a new page

window.navigate("page.html");

This code is similar to the first method and the page will be loaded from the cache if available instead of sending a new request to the server.

How to redirect web page using jQuery

The jQuery API also allows you to redirect a web page to another URL in just one line of code. Though this is not the ideal way of using jQuery and but since we all use jQuery for different needs in a web project, it makes sense to leverage it for whatever feature we can. You can use the attr() function of jQuery to redirect a web page as shown below:

var url = "http://google.com";
$(location).attr('href',url);

There is a slight difference in using attr() vs window.location.href of JavaScript. The $(location).attr('href', url) will request a fresh page from server, while window.location.href loads pages from cache.

Here is a complete web page which redirects to another URL using jQuery:

<html>
   <head>
      <title>How to redirect a webpage using jQuerytitle>
   head>
   <body>
      <h2>Redirecting to another URL ..h2>

      <script src="http://code.jquery.com/jquery-1.6.2.min.js">script>
      <script>
         $(document).ready(function() {
         
          var url = "http://javarevisited.blogspot.com";
          $(location).attr('href',url);
         
         });
      script>
   body>
html>

and here is the output of this web page when you run it on a web browser e.g. internet explorer, chrome or edge:

You can see that the page is redirecting, once the redirect will be complete, the URL and page title will also be replaced by the target URL.  See Head First jQuery to learn more about jQuery and its powerful API.

How to redirect to the previous page

Another case of redirection is going to the previous page, here are some of the common ways to go to the previous page using JavaScript's window object:

window.history.back(); // Simulates a back button click
window.history.go(-1); // Simulates a back button click
window.history.back(-1); // Simulates a back button click

All three methods simulate a back button click programmatically. You can use any of the methods you want to use.

That's all about how to redirect a web request to another web page using JavaScript and jQuery. As you have seen there are multiple ways to redirect but there are subtle differences between them e.g. $(location).attr('href', url) call of jQuery will open a fresh page from the server, but the Javascript window.location.href loads pages from cache.

How do I redirect a URL to another URL?

Can you redirect using JavaScript?

How do I redirect my browser?

How do you redirect someone in JavaScript?