JavaScript

How to redirect to another webpage with javaScript

Page redirection is a technique in which a user attempts to open a particular URL, but instead that user is redirected to another URL. This could occur due to several reasons, some of which are listed below:

  • Your content is moved to a new domain. So, all your visitors will be redirected to that new domain when they’re accessing the older domain.
  • Your domain varies based on language, location etc. So, the user is redirected to the appropriate page based on these factors.
  • Although you’ve moved your content to a different domain, search engines will still hold that content and URL within their index. So in case search engines know that old content has been moved to a new place and that a new place should take the primary spot in the index, you use client-side page redirection.

Page Redirection with JavaScript

In JavaScript we can redirect to another page through the location object which is part of the window object and is accessed through the window.location property. This contains the URL information. There are several ways to redirect to another webpage using JavaScript. The most commonly used ones are location.href, location.assign and location.replace.

Note: The browser console is used for the demonstration of examples in this article.

Using window.location.href to redirect in JavaScript

Using location.href property, you assign the new URL as a String. This is useful when you want an event to occur if the user clicks a button or a link that will redirect them to a new page:

<head>

   <script>

      function pageRedirect() {

         window.location.href = "https://www.google.com/";

      }

   </script>

</head>

<body>

  <button type="button" onclick="pageRedirect()">Go to Google</button>

  <p><strong>Note:</strong> You can go to Google by clicking the button.</p>

</body>

Using window.location.assign method to redirect in JavaScript

This method is similar to window.location.href, where you assign the URL. Through this the user can also track back to the previous page and it will create an entry in the history:

<head>

   <script>

      function pageRedirect() {

         window.location.assign("https://www.google.com/");

      }

   </script>

</head>

<body>

  <button type="button" onclick="pageRedirect()">Go to Google</button>

  <p><strong>Note:</strong> You can go to Google by clicking the button.</p>

</body>

Using window.location.replace method to redirect in JavaScript

The Location.replace() method is used when you want to redirect to a new page without returning back to the older domain. The current page will not be saved in history and will be replaced with the new URL:

<head>

    <script>

       function pageRedirect() {

          window.location.replace("https://www.google.com/");

       }

    </script>

</head>

<body>

   <button type="button" onclick="pageRedirect()">Go to Google</button>

   <p><strong>Note:</strong> You can go to Google by clicking the button.</p>

</body>

Another way of using it is through setTimeout() that redirects to a new page after a particular time assigned to it.

<head>

   <script>

     function pageRedirect() {

       window.location.replace("https://www.google.com/");

     }

     setTimeout("pageRedirect()", 2000);

   </script>

</head>

<body>

  <p><strong>Note:</strong>You can go to Google after 2 seconds.</p>

</body>

Conclusion

You must have come across a situation where you clicked on the URL of a certain page but were redirected towards another page; this technique is called page redirecting and is commonly used by developers for several reasons.

In this post, we’ve gone over different methods of redirecting to another webpage with JavaScript; the post also described the differences between the three redirecting methods in JavaScript, location.href, location.assign and location.replace.

Using location.href and location.assign, the user can easily go back to the previous page as it creates an entry in the history. The location.replace redirects to a new webpage but it doesn’t create an entry in the history which is why the user can’t track back to the previous page.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.