A redirect in JavaScript is a technique that directs search engines and people to a different URL than the original. The rerouted page may be located on the same or a different server. It might also take place on the same or separate websites. We are occasionally redirected to another URL when we click on a URL. It occurs as a result of the page redirection. It's not the same as refreshing a webpage.

In most cases, search engines do not examine the JavaScript to see if the redirection is correct. So, if we need to tell search engines (SEO) about URL forwarding, we must include the rel = "canonical" element in the web page's head section.

There are numerous redirect in JavaScript techniques for accomplishing page redirection, but the most popular are location.href and location.replace(). In JavaScript, page redirection is simple.

The window object's location object is a property. A web page can be redirected in a number of ways. The window.location object is used by almost all functions.

It may be used to obtain the current URL or web address's address. Without the window prefix, the window.location object can be written.

One of the most often used is window.location objects. It's used to create a new document from an existing one. We may give a new URL to this method, and it will initiate an HTTP redirect in JavaScript. It differs from href in that it deletes the current document from the document's history, making it impossible to return to the original.

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

Syntax

window.location.replace("new URL")

Example

<html>  

<head>  

<script type = "text/javascript">  

function page_redirect(){  

window.location = "https://www.rankwithme.com/";  

}  

</script>  

</head>  

<body>  

<h2> This is an example of the page redirection </h2>  

<p> Click the following button to see the effect. </p>  

<form>  

<input type = "button" value = "Redirect" onclick = "page_redirect()" />  

</form>  

</body>  

</html>  

Output

Redirect_in_JavaScript_1

What Is the Use of Redirect in JavaScript?

If you switch to a new domain for any reason, you can send people to the new site when they visit an older domain's content.

You have numerous pages with different content depending on the user's location, language, browser, or other criteria, and you redirect them to the most appropriate page.

Requests for resources from unauthenticated or unauthorized users are sent to a login page.

You direct people to additional sites that are connected to the present site's content.

How Does Redirection Work?

You may have experienced a situation where you clicked a URL to go to website X but were instead sent to page Y. It occurs as a result of page redirection. You may want to divert a visitor away from the original page for a variety of reasons. We've compiled a list of such reasons..

You've decided to change the name of your domain since you don't like it. You may wish to send all of your visitors to the new site in this case. You can keep your previous domain but create a single page with a page redirection so that all visits to your old domain go to your new domain.

If you've created several pages based on browser versions, names, or even different countries, you may utilize client-side page redirection instead of server-side page redirection to route your customers to the proper page.

It's possible that the search engines have already indexed your pages. However, you don't want to lose visitors who came through search engines while switching to a new domain. As a result, client-side page redirection is an option. However, bear in mind that this should not be done to deceive the search engine; otherwise, your site may be blacklisted.

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

Example:

<html>

   <head>

      <script type = "text/javascript">

         <!--

            function Redirect() {

               window.location = "https://www.abc.com";

            }

         //-->

      </script>

   </head>   

   <body>

      <p>Click the following button, you will be redirected to home page.</p>     

      <form>

         <input type = "button" value = "Redirect Me" onclick = "Redirect();" />

      </form>     

   </body>

</html>

Output

Redirect_in_JavaScript_2

Redirect the Page on Page Load With Redirect in JavaScript

You may use the following code at the top of your page, within the head> element, to redirect the visitor to another website soon after your website is launched. Alternatively, if you're using a separate.js file, add the following code to that file and link to it from the page's head. Simply substitute the URL you wish to redirect to for the sample URL. Visitors will not see your web page and will be routed to the target URL immediately with this sort of redirection as you redirect in JavaScript.

<script>

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

</script>

Redirect the Page After an Event With Redirect in JavaScript

In such instances, you may conduct the redirect using a condition check or by assigning an event to an element. Consider the following example:

<script>

// Check if the condition is true and then redirect.

if ( ... ) {

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

}

</script>

Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!

Conclusion 

Interruptive or unexpected web page redirection are regarded as extremely irritating by users since they detract from the overall user experience. For example, redirecting customers to another website as soon as they arrive on your site would inevitably cause them irritation. Furthermore, if you redirect people to an unrelated page after a timer, after they click on a button or picture, or after they perform a certain action on your site, the user will most likely want to leave right away and never return.

If you want to know more about how to redirect in JavaScript, you must enroll in the Simplilearn’s Full Stack Web Development course and enjoy redirecting your pages. Also if you want to enhance your expertise, you can explore Simplilearn’s skill up program where courses offered focus on building strong foundational skills for career growth.

Our Software Development Courses Duration And Fees

Software Development Course typically range from a few weeks to several months, with fees varying based on program and institution.

Program NameDurationFees
Caltech Coding Bootcamp

Cohort Starts: 5 Aug, 2024

6 Months$ 8,000
Automation Test Engineer

Cohort Starts: 3 Jul, 2024

11 Months$ 1,499
Full Stack Developer - MERN Stack

Cohort Starts: 9 Jul, 2024

6 Months$ 1,449
Full Stack Java Developer

Cohort Starts: 16 Jul, 2024

6 Months$ 1,449