Updated April 12, 2023
Introduction to jQuery redirect
- Redirect is a mechanism of sending the user to a different URL from an original one. The page to be redirected to can be on the same server or on a different server.
- There are several ways of redirecting pages, using javaScript or jQuery but jQuery due to its cross browser compatibility, is preferred more than javaScript.
- JavaScript uses location.hrefandlocation.replace() methods for redirection.
- JQuery uses .attr() method to redirect.
- Though both, javaScript and jQuery offers the ways for redirection, there are some major differences between them.
- JQuery .attr() will open a new and fresh page from the server whereas, javaScriptlocation.href will load the page from cache.
Syntax:
$(location).attr('href', url);where, hrefrefers to the attribute which specifies the URL of the page the lick goes to.
URL refers to the value of the href attribute. It is the website or page address.
attr refers to the method which sets the url value to the href attribute.
jQuery redirection can be achieved using the two ways, either the plain javaScript or jQuery. Its completely your choice to use either of them. Here we are going to discuss only the jQuery redirection.
Examples of jQuery redirect
Let us take a look at some of the examples to understand the redirection mechanism using jQuery.
Example #1
Given below is a very simple example to demonstrate the jQuery redirection mechanism.
Code:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Example to Redirect a page or URL</title>
</head>
<body>
<div id="redirect">
<h2>Redirecting to another Page</h2>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
$(location).attr("href", "https://google.com");
});
</script>
</body>
</html>
Output:
- The below screen shows the page for https://google.com.
- On the execution of the code, the original page is directly redirected to the new URL or page https://google.com.
- Since the code for redirection is put under $(document).ready() function, it will execute as soon as page is loaded.
- You will see that once the page redirection is complete, the URL as well as page title will also be replaced by the target URL.
Example #2
Let us consider another example that illustrates the implementation of the jQuery redirection mechanism.
Code:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Example to Redirect a page or URL</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
function pageRedirect() {
$(location).attr("href", "https://google.com");
}
</script>
<style>
#divstyle {
width: 500px;
height: 200px;
padding-top: 20px;
padding-left: 5px;
text-align: center;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="divstyle">
<button type="button" onclick="pageRedirect()">
Go to Google Search
</button>
<p>
<strong>Click on the button above tp go to google.com.</strong>
</p>
<p>
To get back to the original page click the browser back button.
</p>
</div>
</body>
</html>Output:
- The below screen gets displayed when the above source code is executed.
- We see a button “Go to Google Search”, clicking on which redirects the user from the current page to the new page.
Note: In the previous example, we were redirecting the web page directly from the current to the new one. In the above example, we are using a button click to perform redirection.
Example #3
In the following example, we are trying to redirect the web page with a certain amount of delay.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Jquery Redirect Example with a delay
</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function() {
$("button").click(function () {
$(this).text("Redirecting....");
var delay = 2000;
var url = "https://google.com";
setTimeout(function () {
window.location = url;
}, delay);
});
});
</script>
<style>
#divstyle {
width: 500px;
height: 200px;
padding-top: 20px;
padding-left: 5px;
text-align: center;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="divstyle">
<button style="font-size: large; color:brown">Click to redirect</button><br><br>
<p>
<strong>
This is an example for jquery redirection after a certain amount of time.
</strong
>
<p>
On clicking the above button, new page loads after a short delay.
</p>
</p>
</div>
</body>
</html>Output:
- The below screen gets displayed when the above code gets executed.
- We see a button “Click to redirect” which upon click redirects you to the new web page with some delay, in our example, it is 2 seconds.
- The below screen shows the Redirection undergoing with a delay of 2 seconds.
- After 2 seconds, you will be redirected to the new URL page as shown below.
Note: Since we can use both, plain javaScript or jQuery for redirection mechanism, there is a slight difference between the two ways.
With javaScript, we use window.location.hrefand with jQuery, we use $(location).attr(‘href’, url) .
The $(location).attr(‘href’, url)requests a fresh page from server, whereas,window.location.href loads pages from cache.
With javaScript, we use window.location.hrefand with jQuery, we use $(location).attr(‘href’, url) .
The $(location).attr(‘href’, url)requests a fresh page from server, whereas,window.location.href loads pages from cache.
Conclusion
- In this article, we discussed how to redirect a web page or an URL to another web page using jQuery.
- The page or URL redirection using jQuery is a very easy task which can be achieved using just one line of code
- jQuery uses attr() method for this redirection which is slightly different from that of javaScript.
- The only difference lies in the manner then a new page is loaded.
- For jQuery,$(location).attr(‘href’, url) will open a fresh page from the server, whereas, for the javaScript, window.location.href loads pages from cache.
Recommended Articles
This is a guide to jQuery redirect. Here we discuss a Brief Overview on jQuery redirect and its Examples along with its Code Implementation. You can also go through our other suggested articles to learn more –
