Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

How can I redirect the user from one page to another using jQuery?

share|improve this question
13  
I keep seeing both window.location = url; and window.location.href = url; How are they different? Are they? BTW, I didn't know about window.location.replace(url). Nice. – David M. Miller Jun 7 '12 at 14:24
4  
window.location is the same as window.location.href, in terms of behavior. window.location returns an object. If .href is not set, window.location defaults to change the parameter .href. Conclude: Use either one is fine. – Shivan Raptor Aug 7 '12 at 7:03
25  
@Non-StopTimeTravel 1069 upvotes means that 1069 people googled for the best way to make a client-side redirect and found useful information here. Thanks to this question I discovered window.location.replace and it's advantage over window.location.href, and my 300000+ users will be happier when they hit the back button, so it yes, it deserves a big +1 – Samuel Rossille Jan 28 at 22:36
1  
What's asked here may be trivial to a lot of people, but it's very clear and it's a real question, that's undeniable. – Samuel Rossille Jan 28 at 22:39
2  
var url = "website name" $(location).attr('href',url); – Mad Scientist Feb 18 at 11:30
show 2 more comments

15 Answers

up vote 3126 down vote accepted

jQuery is not necessary, and window.location.replace(...) will best simulate an HTTP redirect.

It is better than using window.location.href =, because replace() does not put the originating page in the session history, meaning the user won't get stuck in a never-ending back-button fiasco. If you want to simulate someone clicking on a link, use location.href. If you want to simulate an HTTP redirect, use location.replace.

For example:

// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");

// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
share|improve this answer
9  
The problem I've found using plain Javascript for redirection is that, fore example, IE 7 empties the REFERER var after having set window.location, and so in some php frameworks redirection to the previous page fails after a window.location change – Nicolò Martini Dec 5 '11 at 14:50
2  
in case of submit button add return false ; also inside your function – Abhi sr Apr 19 '12 at 11:52
1  
The question is about javascript specifically, but it may be worth noting that a meta refresh can be used as a fail back in case the user has javascript disabled – Hoppe Jan 24 at 0:51
3  
+1 for this "It is better than using window.location.href =, because replace() does not put the originating page in the session history, meaning the user won't get stuck in a never-ending back-button fiasco." – dougajmcdonald Jun 3 at 18:39
@NicolòMartini If(IE) document.write(""); – Ghillied Jun 7 at 13:28
show 3 more comments

You don't need jQuery to do just that:

window.location = "http://www.page-2.com";
share|improve this answer
14  
note that you don't need jquery – Matt Briggs Feb 2 '09 at 12:57
90  
and this is why i tell people to learn javascript before learning a library. – geowa4 Feb 2 '09 at 14:22
19  
I somewhat agree with George, but actually since I've been learning jQuery it has actually helped me learn javascript, but it is important to know that jQuery is just that abstraction/tool that simplifies javascript for you. – Jon Erickson Feb 2 '09 at 18:49
206  
You mean to tell me there's an underlying technology to jQuery this whole time? Are you ****ing with me? – TheTXI Jun 26 '09 at 17:02
10  
@Lohoris ok, fair enough. I usually downvote wrong answers, upvote complete answeres, and ignore incomplete ones. But that's just me. – IonuČ› G. Stan Mar 30 '12 at 12:22
show 9 more comments

It would help if you were a little more descriptive in what you are trying to do. If you are trying to generate paged data, there are some options in how you do this. You can generate separate links for each page that you want to be able to get directly to.

<a href='/path-to-page?page=1' class='pager-link'>1</a>
<a href='/path-to-page?page=2' class='pager-link'>2</a>
<span class='pager-link current-page'>3</a>
...

Note that the current page in the example is handled differently in the code and with CSS.

If you want the paged data to be changed via AJAX, this is where jQuery would come in. What you would do is add a click handler to each of the anchor tags corresponding to a different page. This click handler would invoke some jQuery code that goes and fetches the next page via AJAX and updates the table with the new data. The example below assumes that you have a web service that returns the new page data.

$(document).ready( function() {
    $('a.pager-link').click( function() {
        var page = $(this).attr('href').split(/\?/)[1];
        $.ajax({
            type: 'POST',
            url: '/path-to-service',
            data: page,
            success: function(content) {
               $('#myTable').html(content);  // replace
            }
        });
        return false; // to stop link
    });
});
share|improve this answer
var url = 'asdf.html';
window.location.href = url;
share|improve this answer

WARNING: This answer has been provided as a possible solution, obviously, the pure JS approach is the right one.

Simply do :

var url = "http://stackoverflow.com";    
$(location).attr('href',url);
share|improve this answer
254  
Terrible why? A guy asks for jQuery, he gets one. – Radek Apr 28 '11 at 10:21
34  
whilst the OP should be open to suggestions, his question was pretty straight forward, and deserves an answer. also keep in mind people hitting this question in fututre may actually want to know how to do it in jquery, for whatever crazy reason. i dont see harm in explaining both – AaronHS Oct 27 '11 at 3:09
9  
More importantly, is there a way to do this with jQuery that is absracted? This is just a wrapper for window.location.href = url; But if jQuery had some function that, if window.location.href = url; wasn't going to work in the current environment (browser, OS, etc.) jQuery core could compensate? – Chris Feb 29 '12 at 16:03
23  
Forcing jQuery into the equation in this way is just ridiculous and pointless, especially since window.location is not an element and therefore does not have attributes. – Tim Down Oct 3 '12 at 10:32
8  
@CoffeeAddict, 2 year old comment, but please school me on how location.href = 'http://stackoverflow.com'; is more verbose than the alternative in the answer here? Even if you take away the variable it is still more verbose and more characters to use jQuery for this. – rlemon Mar 12 at 13:12
show 7 more comments

This works for every browser:

window.location.href = 'your_url';

Good luck!

share|improve this answer
$jq(window).attr("location","http://google.fr");

This version works well with jQuery 1.6.2.

share|improve this answer

You can do that without jQuery as:

window.location = "http://yourdomain.com";

And if you want only jQuery then you can do it like :

$jq(window).attr("location","http://yourdomain.com");
share|improve this answer

All of these answers are correct, but I'll post this for those who might of run into the same strange issue I did. I was having an issue with HTTP_REFERER and how it was getting lost when using simply location.href.

In IE8 and lower location.href (or any & all variations of this lose this variable), which for secure sites is important to maintain, because testing for it (urlpaste'ing/ session / etc) can be helpful in telling whether a request is legitamate. (Note :: there are also ways to work-around / spoof these referer's, as noted by droop's link in the comments)

My cross-browser fix is this simple function. Assuming you of course, are worried about losing HTTP_REFERER as I stated. (otherwise you can just use location.href etc etc

function _Redirect (url) {

    // IE8 and lower fix
    if (navigator.userAgent.match(/MSIE\s(?!9.0)/)) {
        var referLink = document.createElement('a');
        referLink.href = url;
        document.body.appendChild(referLink);
        referLink.click();
    } 

    // All other browsers
    else { window.location.href = url; }
}

Useage: _Redirect('anotherpage.aspx');

share|improve this answer
3  
Foot note: checking for referrer as a security measure is a lousy solution. duckduckgo.com/?q=referrer+spoofing – droope Jan 29 at 23:41

But if some one wants to redirect back to home page then he may use the following snippet.

window.location = window.location.host

It would be helpful if you have three different environments as development, staging, and production.

You can explore this window or window.location object by just putting these words in Chrome Console or Firebug's Console.

share|improve this answer

On your click function just add

window.location.href = "the url where you want to redirect";
$('#id').click(function(){
    window.location.href = "http://www.google.com";
});
share|improve this answer

I also think that location.replace(url) is the best way, but if you want to notify the search engines about you redirection (they don't analyze javascript to see the redirection) you should add the rel="canonical" meta tag to your website.

Adding a noscript section with a html refresh meta tag in it, is also a good solution. I suggest you to use this javascript redirection tool to create redirections. It also have an IE support to pass the http referrer.

A sample code without delay look like this:

<!--Pleace this snippet right after opening the head tag to make it work properly-->
<!--REDIRECTING STARTS-->
<link rel="canonical" href="https://yourdomain.com"/>
<noscript>
<meta http-equiv="refresh" content="0;URL=https://yourdomain.com">
</noscript>
<script type="text/javascript">
    var url = "https://yourdomain.com";

    // IE8 and lower fix
    if (navigator.userAgent.match(/MSIE\s(?!9.0)/))
    {
        var referLink = document.createElement("a");
        referLink.href = url;
        document.body.appendChild(referLink);
        referLink.click();
    }

    // All other browsers
    else { window.location.replace(url); }
</script>
<!--REDIRECTING ENDS-->
share|improve this answer

first write properly you want to navigate within application for another link from your application for another link here is the code:

window.location.href = "http://www.google.com";

and if you want to navigate pages within your application then also i have code if you want.

share|improve this answer
Use the following code

$('#id').click(function(){
   window.location.href("https://www.google.co.in/");
});
share|improve this answer
it is a repeat of another answer. – Hemerson Varela Jun 11 at 19:50

write the below code after php or html or jquery if in the middle of php or html then use tag

location.href = "http://google.com"
share|improve this answer

protected by Community Mar 27 '12 at 17:03

This question is protected to prevent "thanks!", "me too!", or spam answers by new users. To answer it, you must have earned at least 10 reputation on this site.

Not the answer you're looking for? Browse other questions tagged or ask your own question.