Redirecting a web page means, taking user to new location. Many website use redirect for many different reasons, e.g. Some website redirect user from old domain to new domain, some redirect from one page to another e.g. a more relevant page. If you are Java programmer, and worked previously with Servlet and JSP, then you might be familiar with SendRedirect and Forward methods, which are used to redirect user in web applications. Actually there are two kinds of redirect, Server side redirect and client side redirect. In Server side redirect, server initiate redirection, while in client side redirect, client code does the redirection. Redirecting a web page using JavaScript and JQuery is a client side redirection. Well, HTTP redirection is a big topic and different people do it differently. e.g. bloggers mostly used platform like WordPress, Blogger feature to redirect a page, though this might be restricted to same domain. In this JavaScript and JQuery tutorial, we will learn a new JQuery tip to redirect a page.
You can even pass URL directly to attr() method, instead of using a variable.
It's even simpler in JavaScript. You only need to change window.location.href property to redirect a page. Though some people also use window.location only, which is also fine. If you are curious about difference between window.location and window.location.href, then you can see that later one is setting href property explicitly, while earlier one does it implicitly. Since window.location returns an object, which by default sets it's .href property.
There is another way to redirect a page using JavaScript, replace() method of window.location object. You can pass new URL to replace() method and it will simulate an HTTP redirect. By the way, remember that window.location.replace() method doesn't put the originating page in session history, which may affect behaviour of back button. Sometime, it's what you want, so use it carefully.
That's all on How to redirect a page or URL using JQuery and JavaScript. It's debatable, whether to stuck with JavaScript or JQuery for redirection, but if I need to choose between both of them, I would go with JQuery, because JQuery offers cross browser compatibility. Though, window.location.href may work on all browser, it's better to be safe then sorry.
JQuery Code to redirect a page or URL.
Here is the JQuery code for redirecting a page. Since, I have put this code on $(document).ready() function, it will execute as soon as page is loaded.
var url = "http://java67.blogspot.com";
$(location).attr('href',url);
You can even pass URL directly to attr() method, instead of using a variable.
JavaScript Code for redirecting a URL
It's even simpler in JavaScript. You only need to change window.location.href property to redirect a page. Though some people also use window.location only, which is also fine. If you are curious about difference between window.location and window.location.href, then you can see that later one is setting href property explicitly, while earlier one does it implicitly. Since window.location returns an object, which by default sets it's .href property.
//similar to window.location
window.location.href="http://java67.blogspot.com";
There is another way to redirect a page using JavaScript, replace() method of window.location object. You can pass new URL to replace() method and it will simulate an HTTP redirect. By the way, remember that window.location.replace() method doesn't put the originating page in session history, which may affect behaviour of back button. Sometime, it's what you want, so use it carefully.
//does't put originating page
in history
window.location.replace("http://savingsfunda.blogspot.com");
HTML Example of Redirecting a Page or URL
Here is complete HTML page, which uses above method to redirect a page or URL. Since you can only use one method at a time, I have commented rest of code for redirection. You can uncomment and try them as well.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript and
JQuery Example to Redirect a page or URL </title>
</head>
<body>
<div id="redirect">
<h2>Redirecting to
another Page</h2>
</div>
<script
src="scripts/jquery-1.6.2.min.js"></script>
<script>
// JavaScript
code to redirect a URL
window.location.replace("http://java67.blogspot.com");
// Another way
to redirect page using JavaScript
//window.location.href="http://java67.blogspot.com";
//JQuery code
to redirect a page or URL
$(document).ready(function(){
/var url =
"http://java67.blogspot.com";
//$(location).attr('href',url);
});
</script>
</body>
</html>
That's all on How to redirect a page or URL using JQuery and JavaScript. It's debatable, whether to stuck with JavaScript or JQuery for redirection, but if I need to choose between both of them, I would go with JQuery, because JQuery offers cross browser compatibility. Though, window.location.href may work on all browser, it's better to be safe then sorry.
No comments:
Post a Comment