Home » JavaScript

Redirect to a URL in JavaScript

In this article, we will look at how to redirect to a different page or website using JavaScript? Submitted by Siddhant Verma, on November 25, 2019

We know that the window object is like the mother of all objects in JavaScript and contains loads of different methods and properties attached to it. We have also seen some of them like localstorage, innerWidth, innerHeight, outerWidth and outerHeight, etc. Today we'll look at a property called location built on top of the window object that will allow us to redirect to different pages from one point.

Syntax:

    window.location = <url>;

The URL must be enclosed within quotations. Let's quickly try out inside the dev console of your browser. Go to any page and open the console and type in,

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

Hit enter and voila! You're redirected to facebook.com.

We can also redirect to a page on loading the window. Let's see the following example,

index.html

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script type="text/javascript">
        function loadNewDoc() {
            window.location = "https://www.includehelp.com/";
        }
    </script>
</head>
<style>
    .loader {
        margin: auto;
        border: 16px solid brown;
        width: 120px;
        height: 120px;
        border-top-color: violet;
        border-bottom-color: violet;
        border-radius: 50%;
        animation: loaderAnimate 4s linear infinite;
    }
    
    @keyframes loaderAnimate {
        0% {
            transform: rotate(0deg) scale(1);
        }
        25% {
            border: 16px solid SlateBlue;
            border-top-color: Tomato;
            border-bottom-color: Tomato;
        }
        50% {
            transform: rotate(360deg) scale(1.1);
            border: 16px solid orange;
            border-top-color: yellow;
            border-bottom-color: yellow;
        }
        75% {
            border: 16px solid DodgerBlue;
            border-top-color: MediumSeaGreen;
            border-bottom-color: MediumSeaGreen;
        }
        100% {
            transform: rotate(720deg) scale(1);
        }
    }
    
    @keyframes appear {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
</style>

<body>

    <body onLoad="setTimeout('loadNewDoc()', 5000)">
        <h3>You will be redirected shorty...</h3>
        <div class="loader"></div>
    </body>
    <script>
    </script>

</html>

Output

And then we get the home page for includehelp.com

We have other redirection methods to redirect a URL to another page like location.replace(), localtion.assign() and location.reload().

location.replace() replaces the current document with a new one. We pass the new URL as a parameter to it and it performs an HTTP redirect. Similarly, we can also use location.assign().

Comments and Discussions!

Load comments ↻

Index

JavaScript Tutorial

JavaScript Examples

CSS Tutorial

CSS Examples

Redirect to a URL in JavaScript