October 1, 2021

How to Redirect to Another Page using Javascript and HTML

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to redirect to another page using javascript and HTML. There could be various reasons for auto redirecting your website visitors to another page on your website or a third-party website.

The auto redirection can be done using either HTML or javascript. We are going to cover both approaches so depending upon your requirement, you can pick one of them.

For the HTML auto-redirect solution, we are going to make use of meta element with http-equiv and content attributes. The value for http-equiv will be refresh and as the name suggests, it will refresh the page in a specific time interval.

But refreshing the page is not our goal and that is why we are making use of the content attribute. We need to specify 2 things in this attribute, the number of seconds to wait before redirect and the URL to which we want to auto-redirect. You can provide here either relative URL or absolute URL.

For the javascript auto-redirect solution, we are going to make use of the setInterval() method and location object. The setInterval() method will be used to simulate 5 seconds delay and display a counter on the screen.

The location object contains replace() method which will help us in redirecting to another page. The replace() methods take a URL as a parameter. Again, that URL can be relative or absolute.

In the following example, we will cover both the solutions mentioned above. We will simply display a counter of 5 seconds on the screen and as soon as it completes, the redirection to google.com will be triggered. Please have a look over the code example and the steps given below.

HTML & CSS

We have an h1 element in the HTML file. It contains style attribute to center align the text content.
The innerText for the h1 element is “Counter” and we will update it dynamically using javascript to display the number of seconds before redirection.
We have also included our javascript file script.js with a script tag at the bottom.

HTML Auto Redirect

We have added a meta element with http-equiv and content attributes in the head element.
The value of http-equiv is set to refresh. It will help us in refreshing the page.

The value of the content attribute is set to "5; url=https://www.google.com/" and this means that wait for 5 seconds before refreshing the page and on refresh redirect to google.com

<!DOCTYPE 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">
    <!-- <meta http-equiv="refresh" content="5; url=https://www.google.com/"> -->
    <title>Document</title>
</head>
<body>
    
    <h1 style="text-align: center">Counter</h1>

    <script src="script.js"></script>
</body>
</html>

Javascript Auto Redirect

We have selected the h1 element using the document.querySelector() method and stored it in the counter variable.

We have one global variable count and that holds a value of 1.
We are using the setInterval() method with a delay of 1 second. It will take an anonymous method as its first parameter which will be executed after each interval of 1 second.
In the anonymous method, we are setting the current value of the count variable as innerText of h1 element and incrementing value of count by 1.

We are using if statement to verify whether the count has reached number 5 or not. If yes, we are going to make use of replace() method of location object to trigger redirection to google.com.

let counter = document.querySelector('h1');
let count = 1;

setInterval(()=>{

    counter.innerText = count;
    count++
    
    if(count > 5) location.replace('https://www.google.com/')
    
},1000)

You May Also Like: