Register Login

Redirect the User from One Page to Another Using jQuery or JavaScript?

11 Nov 2020 9:16 am || 0

What is a Webpage Redirect

Sometimes, a company website might change its domain or website address. But if you only know the previous version of the site, you’ll try to login there, isn’t it? Suppose you want to access abc.com. But unfortunately, it had changed its address to xyz.com.

What now?

The site will redirect you to its current address automatically. 

You can redirect a web page via JavaScript using a number of methods. In this post, we will list the different methods for redirecting a web page.  

Ways to Redirect a Webpage using JavaScript  

In this article you will learn the following methods to redirect the user from one page to another using JavaScript:

1) Using window.location method

In JavaScript, window.location or simply location object is used to get information about the location of the current web page (document) and also modify it.

The window.location sets the new location of the current window.

<script>
window.location = "https://www.stechies.com";
</script>

2) Using window.location.href method

This JavaScript method sets the new href (URL) for the current window. This method is used when you want the user to be redirected to another page on an event, such as a button click.  

<script>
window.location.href = "https://www.stechies.com";
</script>

3) Using window.location.assign method

This method assigns a new URL to the current webpage. It doesn’t store the old URL in the session history. So, user doesn’t go back the previous webpage.

Look at the example below – 

<script>
window.location.replace = "https://www.stechies.com";
</script>

4) Using window.location.replace method

This method replaces the new URL to the current webpage. It doesn’t store the old URL in history. So the user doesn’t go back the previous web page.

<script>
window.location.replace = "https://www.stechies.com";
</script>

5) Using self.location method

This method sets the location of the current url to itself, which causes a redirect.  

<script>
self.location = "https://www.stechies.com";
</script>

6) Using top.location method

This method sets the location of the topmost window to the new window. It is used if you are using iframe and we want to replace the locaiton of top window with a new URL.

<script>
top.location.assign= "https://www.stechies.com";
</script>

7) Redirect user to new page after page load

If you want to redirect user to new page just after the page loads, use the code given below. You can put this code inside the <head> element of your HTML document.  

<!doctype html>
<html>
<head>
<title>Page Redirect</title>
<script>
  window.location.href = "https://www.stechies.com";
</script>
</head>
<body>
</body>
</html>

8) Redirect user to new URL after few seconds delay 

This method can be used to redirect the user to a new webpage after a short delay of few seconds.

<!doctype html>
<html>
<head>
<title>Page Redirect</title>
<script>
function pageRedirect() {
window.location.href("https://www.stechies.com/");
}      
setTimeout("pageRedirect()", 3000);
</script>
</head>
<body>
</body>
</html>

The above function will redirect the page 3 seconds after it fully loads. You can change 3000 (3 x 1000 in milliseconds) if you wish.

9) Redirect user to new url on button or link click

The code given below will redirect you to another page after you click a button - 

<!doctype html>
<html>
<head>
<title>Page Redirect</title>
<script>
function pageRedirect() {
window.location = ("https://www.stechies.com/");
}
</script>
</head>
<body>
<input type="button" name="button" id="button" value="Button" onClick="javascript:pageRedirect()">
<a href="Javascript:pageRedirect();">Click</a>
</body>
</html>

Ways to Redirect a Webpage using JQuery

Using jQuery attr() method

You can use the attr() method in jQuery to redirect a user to another page. Look at the example script below –

<script>
$(document).ready(function() {
var url = " https://www.google.com/";
$(location).attr('href',url); });
</script>

In this method, a new web page will be requested from the server while redirection.

Hope the article has been able to clarify your doubts regarding page redirection. Try out the methods one by one while coding your webpage, to see which works the best.