Redirecting a web page means, taking the user to a new location. Many websites uses redirects for many different reasons, e.g. Some websites redirect users from the old domain to new domain, some redirect from one page to another e.g. a more relevant page. If you are a Java programmer and worked previously with Servlet and JSP, then you might be familiar with SendRedirect and Forward methods, which are used to redirect users in web applications. Actually, there are two kinds of redirect, Server side redirect, and client-side redirect. In Server side redirect, the server initiates redirection, while in a client-side redirect, the 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 platforms like WordPress, Blogger feature to redirect a page, though this might be restricted to the same domain.
In this JavaScript and jQuery tutorial, we will learn a new JQuery tip to redirect a page.
Btw, If you are learning jQuery then I also suggest you keep a copy of Head First jQuery, I have and always look back on this book whenever I am stuck. It has got some good examples, which you can always refer back to.
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 the 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 a 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 the session history, which may affect the behavior of the back button. Sometimes, it's what you want, so use it carefully.
Well, HTTP redirection is a big topic and different people do it differently. e.g. bloggers mostly used platforms like WordPress, Blogger feature to redirect a page, though this might be restricted to the same domain.
In this JavaScript and jQuery tutorial, we will learn a new JQuery tip to redirect a page.
Btw, If you are learning jQuery then I also suggest you keep a copy of Head First jQuery, I have and always look back on this book whenever I am stuck. It has got some good examples, which you can always refer back to.
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 the 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 the 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 a 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 the session history, which may affect the behavior of the back button. Sometimes, 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 a complete HTML page, which uses the above method to redirect a page or URL. Since you can only use one method at a time, I have commented rest of the 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 browsers, it's better to be safe than sorry.
Other jQuery tutorials and articles you may like
- How to get the current URL, Parameters, and Hash using jQuery? (solution)
- How to modify multiple elements in one go? (jquery tutorial)
- How to find all unchecked checkbox in jQuery? (tutorial)
- jQuery Hello World Example (program)
- How to enable/disable form elements in jQuery? (tutorial)
- How to use more than one jQuery UI DatePicker on the JSP page? (example)
- How to check/uncheck checkboxes in jQuery? (tutorial)
- How to create tab-based UI using jQuery? (example)
- How to redirect a page URL using jQuery and JavaScript? (solution)
- How to find all checked checkboxes in jQuery? (example)
- 20 jQuery Interview Questions for Java Web Developers (list)
- How to load jQuery on a web page? (solution)
- How to use multiple jQuery UI Date Picker in a page? (tutorial)
- How to solve jQuery - uncaught reference error $ is not defined error? (solution)
There is one other method assign() which can also be used to for Client side redirect.
ReplyDeleteThe difference between this method and assign(), is that replace() removes the URL of the current document from the document history, meaning that it is not possible to use the "back" button to navigate back to the original document.
Tip: Use the assign() method if you want to load a new document, and the option to navigate back to the original document.
Is there a way top open the url in a parent window (cms formular) ??? I use this in an iframe wich works fine but would like to go to a url from the main site.
ReplyDeletehello
ReplyDeletei just want your help ,pls tell me how to write a javascript for a page having two links, link1 & link2 and the heading on the page is link3 but if we click on one of the two links we should redirect on the page having heading the link we have clicked and other two links written at the bottom
$(location).attr('href', url) : will open fresh page from server, while window.location.href loads pages from cache.
ReplyDelete