HomeResourcesSoftware DevelopmentJavaScript Tutorial: Learn JavaScript from ScratchHow to Redirect to Another Webpage Using JavaScript

Tutorial Playlist

JavaScript Tutorial: Learn JavaScript from Scratch

Overview

An Introduction to JavaScript: Here Is All You Need to Know

Lesson - 1

JavaScript Hello World: Here's What You Need To Know

Lesson - 2

All You Need to Know About JavaScript Arrays

Lesson - 3

Using Array Filter In JavaScript to Filter Array Elements

Lesson - 4

Everything You Need to Know About Array Reduce JavaScript

Lesson - 5

Introduction To JavaScript Loops: Do-While, For, For-In Loops

Lesson - 6

All You Need to Learn About Javascript Functions

Lesson - 7

The Best Guide on How to Implement JavaScript Closures

Lesson - 8

JavaScript “This” Keyword and How to Implement It

Lesson - 9

How to Implement JavaScript Form Validation

Lesson - 10

An Introduction Guide To JavaScript RegEx

Lesson - 11

How to Do an Email Validation in JavaScript?

Lesson - 12

All You Need to Know About JavaScript Promises

Lesson - 13

How to Implement JavaScript Async/Await

Lesson - 14

JavaScript DOM Tutorial: 2020 Edition

Lesson - 15

JavaScript Objects: Properties, Methods, and Accessors

Lesson - 16

Typeof in JavaScript: Checking Data Types Using the Typeof Operator

Lesson - 17

Callback Functions in JavaScript: Everything You Need to Know

Lesson - 18

An Introduction to Javascript Games: The Best Guide

Lesson - 19

An Easy Guide to Build a Calculator App in JavaScript

Lesson - 20

Javascript Projects: The Best Guide

Lesson - 21

Best JavaScript Examples You Must Try in 2024

Lesson - 22

What is OOP in JavaScript? How is it Implemented?

Lesson - 23

JavaScript Events

Lesson - 24

Everything You Need to Know About Let in Javascript

Lesson - 25

Trying Your Hands on Java? Here’s a Guide to Help You Add a New Line in JavaScript

Lesson - 26

Understanding Operators in JavaScript

Lesson - 27

Redirect in Javascript: A Complete Guide to Help You With the Concept

Lesson - 28

Top 80+ JavaScript Interview Questions and Answers for 2025

Lesson - 29

Tips and Tricks That You Should Know Before Going to a Coding Interview

Lesson - 30

Top 65+ JQuery Interview Questions And Answers for 2025

Lesson - 31

Your Complete Guide on the Scope of Variables in JavaScript

Lesson - 32

An Introduction to JavaScript Void 0

Lesson - 33

Understanding Why Is the Password Validation Process Important in JavaScript

Lesson - 34

Java Vs .NET: Which Is the Best Technology to Choose?

Lesson - 35

A Guide to Convert String to Int in Javascript

Lesson - 36

How to Redirect to Another Webpage Using JavaScript

Lesson 28 of 36By Simplilearn

Last updated on Nov 26, 202414046
Redirect in Javascript: A Complete Guide to Help You With the Concept

Table of Contents

View More

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.

About the Author

SimplilearnSimplilearn

Simplilearn is one of the world’s leading providers of online training for Digital Marketing, Cloud Computing, Project Management, Data Science, IT, Software Development, and many other emerging technologies.

View More
  • Acknowledgement
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, OPM3 and the PMI ATP seal are the registered marks of the Project Management Institute, Inc.