Redirect to another page using JavaScript

Hello Learners! In this, you gonna learn how to redirect to another page using JavaScript.

In Javascript, you can redirect to another page using the object window.location.

I believe you all have known to redirect to another page using HTML, by using anchor tag.

Let see how to do it with JavaScript!

What we know is redirection to webpage

Using anchor tag in HTML,

<!DOCTYPE html>
<html> 
<head> 
<Title>Anchor Tag</Title> 
</head> 
<body> 
<p> Using Anchor tag webpage redirection</p> 
<br>
//Using the element "href" 
<a href="https://www.codespeedy.com/">Codespeedy</a> //webpage redirection in <a> tag 
</body> 
</html>

The element “href” hyperlinks to the next page.

Output:

Using Anchor tag webpage redirection
Codespeedy

Redirect to a Webpage using JavaScript

The webpage redirection using JavaScript we can use two ways,

By, using two method

  • location.href=”link…”;
  • location.replace(“link…”);

Method 1:

  • Using location.href the website redirects.
location.href="https://www.codespeedy.com/";

Method 2:

  • Using location.replace() the website redirects.
location.replace("https://www.codespeedy.com/")

In below, by using function the method 1 and method 2 is implemented by button.

  • Method 1( with button)

<button onclick="redirect()">Method1</button>

<script>
function redirect()
 {
    location.href="https://www.codespeedy.com/"; 
 }
</script>
  • Method 2(with button)

<button onclick="redirect2()">Method2</button>

<script>
function redirect2() 
{   
    location.replace("https://www.codespeedy.com/")
}
</script>

Thus our entire code to Redirect another page using JavaScript:

The below code consist of both method 1 and method 2:

In this code, you can try it out using practicing it in your editor, so that you can better understand it practically.

<!DOCTYPE html>
<html>
<head>
<title>Webpage Redirection</title>
</head>
<body>
<p>Redirect Webpage using JavaScript</p>
<br>
<!------------------------------------------------- Button for redirection --------------------------------------------> 
<p>Method 1</p>
<button onclick="redirect()">Methodbutton1</button>

<br><br>

<p>Method 2</p>
 
<button onclick="redirect2()">Methodbutton2</button>

<!----------------------------------------------------- Javascript ----------------------------------------------------->
<script>
// function which redirects using replace method

function redirect() {
  location.replace("https://www.codespeedy.com/")
}

// function which redirects using href

function redirect2() {
  location.href="https://www.codespeedy.com/";
}
</script>

</body>
</html>

Output:

Redirect Webpage using JavaScript
Method 1:
Methodbutton1

Method 2:
Methodbutton2

A short recap:

  1. Redirect methods: location.replace() method and location.href=”.. ” method.
  2. location.replace() method is case-sensitive.
  3. location.href method is also case-sensitive.
  4. Use the button for redirection.

Also read: Create a vertical Timeline using HTML, CSS and JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *