A redirect is a way to send both users and search engines to a different URL from the one they originally requested. There are many cases when we want our users to be redirected to new page. This is a nice technique. If you need to know about the different type of redirect, you can go to this link.
There are many ways you can redirect your user to a new page. This is simply done in JavaScript or Jquery. In this tutorial, I will demonstrate to you the different methods of redirecting the users.
Automatic Redirect page with Jquery or JavaScript
First, let me show you how to automatically redirect the users to the new page. This can be done in many ways. I will show you some simpler method that is used mostly.
1. Using Location.Replace
The replace() method replaces the current document with a new one. The page that was calling the function, won’t be included in the browser history. Therefore, on the new location, clicking the back button in your browser would make you go back to the page you were viewing before you visited the document containing the redirecting JavaScript.
Location.Replace can also be used by Jquery or JavaScript.
<html>
<head>
<title> Automatic page redirect with jquery and javaScript </title>
</head>
<body>
<h2>Please wait!!!. You are being redirected to another page </h2>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.js"></script>
<script>
//for using javascript, uncomment the below line and comment lines for jquery
//window.location.replace("http://blog.vijayrana.com.np/");
//for using jquery
$(document).ready(function(){
window.location.replace("http://blog.vijayrana.com.np/");
});
</script>
</body>
</html>
2. Using Location.href
The href property sets or returns the entire URL of the current page.
<html>
<head>
<title> Automatic page redirect with jquery and javaScript </title>
</head>
<body>
<h2>Please wait!!!. You are being redirected to another page </h2>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.js"></script>
<script>
//for using javascript, uncomment the below line and comment lines for jquery
//window.location.href="http://blog.vijayrana.com.np/";
//for using jquery
$(document).ready(function(){
window.location.href="http://blog.vijayrana.com.np/";
});
</script>
</body>
</html>
3. using attr() function
<html>
<head>
<title> Automatic page redirect with jquery and javaScript </title>
</head>
<body>
<h2>Please wait!!!. You are being redirected to another page </h2>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.js"></script>
<script>
$(document).ready(function(){
var url = "http://blog.vijayrana.com.np/";
$(location).attr('href',url);
});
</script>
</body>
</html>
These are the most commonly used methods for automatic page redirect using JQuery and JavaScript. You can simply use any of the methods mentioned above.
If you want to learn more about JavaScript, you can go through the Inroduction to JavaScript for beginners.
