How to redirect a page or URL using JavaScript and JQuery - Example (original) (raw)

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.

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

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

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.

****JavaScript and JQuery Example to Redirect a page or URL <strong>

<div** id="redirect"**>

Redirecting to another Page

<script** src="scripts/jquery-1.6.2.min.js"**>

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.