How can I make a redirect page in jQuery/JavaScript?
53
How can I redirect the user from one page to another using jQuery?
improve this question | comment
Aileen MacGyver Created at: 2013-11-13 17:07:38 UTC By Aileen MacGyver
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. - Kayleigh Beer
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. - Reyes Koss
@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 - Shanon Runolfsdottir
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. - Marielle Watsica
var url = "website name"  
$(location).attr('href',url); - Miss Berniece Prohaska
21 Answers
0
Use the following code:

$('#id').click(function(){
   window.location.href("https://www.google.co.in/");
});

0
$jq(window).attr("location","http://google.fr");


This version works well with jQuery 1.6.2.
0
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";

0
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);



0
You don't need jQuery to do just that:

window.location = "http://www.page-2.com";

0
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
    });
});

0
This works for every browser:

window.location.href = 'your_url';


Good luck!
0
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-->

0
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");

0
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.
0
var url = 'asdf.html';
window.location.href = url;

0
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";
});

0
JQuery is not needed you can do this:
    window.open("URL","_self","","")
It is that easy!!
0
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.
0
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"

0
In javascript and jquery are using following code to redirect the one page to another page.

window.location.href="http://google.com";
window.location.replace("page1.html");

0
So, the question is how to make a redirect page, and not how to redirect to a website?

You only need to use Javascript for this. Here is some tiny code that will create a dynamic redirect page.

<script>
    var url = window.location.href.split('?url=')[1]; // Get the url after ?url=
    if( url ) window.location.replace(url);
</script>


So say you just put this snippet into a redirect/index.html file on your website you can use it like so.


  http://www.mywebsite.com/redirect?url=http://google.com


And if you go to that link it will automatically redirect you to google.com.


  Documentation: https://developer.mozilla.org/en-US/docs/Web/API/window.location


And that's how you make a Simple redirect page with javasctript
0
This can also be used to reload your page 


  window.location.reload(true);

0
Simply:  window.location("url string");
0
window.location.href = desireurl; e.g "https://www.google.co.in"
0
All of these answers are correct, but I'll post this for those who might run into the same strange issue that I did.  I was having an issue with HTTP_REFERER getting lost when using simply location.href.

In IE8 and lower, location.href (or any & all variations location - will lose referrer), which for secure sites is important to maintain, because testing for it (url pasting/ session / etc) can be helpful in telling whether a request is legitimate. 
(Note :: there are also ways to work-around / spoof these referrers, 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)

Usage: _Redirect('anotherpage.aspx');

function _Redirect (url) {
    var ua        = navigator.userAgent.toLowerCase(),
        verOffset = ua.indexOf('msie') !== -1,
        version   = parseInt(ua.substr(4, 2), 10);

    // IE8 and lower
    if (verOffset && version < 9) {
        var link = document.createElement('a');
        link.href = url;
        document.body.appendChild(link);
        link.click();
    }

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

Your Answer