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:
- Using window.location method
- Using window.location.href method
- Using window.location.assign method
- Using window.location.replace method
- Using self.location method
- Using top.location method
- Redirect user to new page after page load
- Redirect user to new URL after few seconds delay
- Redirect user to new url on button or link click
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.