Wednesday, December 25, 2013

How to redirect a page or URL using JavaScript and JQuery

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.


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

jQuery and JavaScript example of HTTP redirection pageIt'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.

3 comments :

Mohan Mareedu said...

There is one other method assign() which can also be used to for Client side redirect.

The 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.

Anonymous said...

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.

Rashmi Rawat said...

hello
i 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

Post a Comment