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

136 upvote
  flag
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
95 upvote
  flag
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. – Raptor
9 upvote
  flag
var url = "website name" $(location).attr('href',url); – Mad Scientist
29 upvote
  flag
@MadScientist That is a backwards way to do it. The location object is not a an HTML element and using the jquery object to set it just seems wrong. Why would you use that when the straight JS code is so simple? – Juan Mendes
1 upvote
  flag
Why do you want to redirect ? The login form should not be submitted? And even if there is no logic in the target page, you still will be able to submit the form to another page. – Dimt
1 upvote
  flag
JavaScript isn't really too efficient, as JavaScript might be disabled on the client browser. This is why PHP or similar could guarantee a proper redirect. – ascx
upvote
  flag
This question asks how to redirect to another page, but the answers including the accepted are talking about how to redirect to a website. – ojonugwa ochalifu
upvote
  flag
upvote
  flag
@OjonugwaOchalifu you can add a relative or absolute url if you like (instead of a website url) – Adrien Be
5 upvote
  flag
@Socialz your argument is not valid as this question does specify the use of jQuery hence Javascript. If you want a PHP solution then go to the relevant PHP question. ps: disabling javascript is the most retarded thing a user can do. – Adrien Be
upvote
  flag
Refer this Link – KarSho
1 upvote
  flag
Video showing all the approaches: youtube.com/watch?v=CkLSapxVyGQ – ssmith
upvote
  flag
upvote
  flag
don't forget to call return false if its done in a javascript client event otherwise you won't be redirected. – Herman Van Der Blom

60 Answers 11

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
    });
});
up vote 11963 down vote accepted

One does not simply redirect using jQuery

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

window.location.replace(...) is better than using window.location.href, because replace() does not keep 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:////allinonescript.com");

// similar behavior as clicking on a link
window.location.href = "http:////allinonescript.com";
38 upvote
  flag
in case of submit button add return false ; also inside your function – Abhi
87 upvote
  flag
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
13 upvote
  flag
@NicolòMartini If(IE) document.write(""); – Jeff Noel
1 upvote
  flag
yes it works: jsfiddle.net/NcB2w/2/show – Stano
upvote
  flag
Why do we never get explicit with document but it's always window.location or window.open? Properties of window are global. – Erik Reppen
upvote
  flag
What would be the practical difference? @RyanMcGeary – Pinch
upvote
  flag
this didn't work for my scenario but this did : //allinonescript.com/questions/12591953/… – null
3 upvote
  flag
@NicolòMartini I posted a way of not losing REFERRER below if you want to check it out! – Mark Pieszak - DevHelp.Online
1 upvote
  flag
What code can I use so the redirect works in production and development? Because the domain differs of course – user1529956
upvote
  flag
@NicolòMartini this is how I work around the referrer issue, also it gives me a nice tidy way to abstract site navigation logic away github.com/michaelpapworth/jQuery.navigate – Michael Papworth
21 upvote
  flag
If you're already using jQuery, just use $(location).attr('href',url);. window.location.href seems to have inconstant behavior in some browsers, in fact, it flat out doesn't work in my version of Firefox. I've heard tell of setting window.location directly not working in versions of IE. – Noz
upvote
  flag
There is an issue with this code, because the same code doesn't work when you go back using the back button. It just doesn't work anymore. – victor sosa
1 upvote
  flag
@Samir, No. The correct answer is to call the window.location.replace(...) function -- something that jQuery can't help improve. Pedantic commentary on a 6 year-old vetted answer isn't appreciated. – Ryan McGeary
upvote
  flag
@RyanMcGeary When using window.location.replace(), can I only add the directory, or must I include the host? – Jacques Marais
upvote
  flag
@JacquesMarais Yes, relative and absolute paths should both work. Just like the href attribute in an anchor tag <a>. – Ryan McGeary
upvote
  flag
or simply - window.location="http://yahoo.com" – gprasant
upvote
  flag
"is better" should be removed. As stated later in the answer, the best solution is situational. OP does not ask "how can I emulate an HTTP redirect with Javascript..." – MadMaardigan
1 upvote
  flag
Does not work if a link begins with www. It does only work with http or https. But how can we make sure that the website even supports https?! – Black
var url = 'asdf.html';
window.location.href = url;

WARNING: This answer has merely been provided as a possible solution; it is obviously not the best solution, as it requires jQuery. Instead, prefer the pure JavaScript solution.

$(location).attr('href', 'http:////allinonescript.com')
37 upvote
  flag
This is that literal answer to the question. If you are already using Jquery and therefore have it already loaded then it will be more bandwidth efficient and of course clearer to use the shortcut – barrymac
18 upvote
  flag
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
206 upvote
  flag
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
upvote
  flag
I think window.location does not work on some IE versions.The point of jQuery is not just easing front end scripting but making it cross browser too. – Mad Scientist
37 upvote
  flag
@CoffeeAddict, 2 year old comment, but please school me on how location.href = 'http:////allinonescript.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
7 upvote
  flag
I somehow doubt this still works with recent jQuery versions where .attr() actually sets attributes (i.e. .setAttribute()) – ThiefMaster
111 upvote
  flag
@deltaray This is not another way to redirect, like said above, it's a meaningless wrapper around the location object, which, is not even an element! This reminds me of i.stack.imgur.com/ssRUr.gif – JCM
3 upvote
  flag
also $(location)[0].href = url; and even $, location.href = url; I prefer second jQuery solution – vp_arth
2 upvote
  flag
I know it is an old question, there is a curiosity: some XSS filters don't allow things like <script>location="http://example.com;</script>" and will block it, but if you use jQuery they will not block it. – Gustavo Rodrigues
4 upvote
  flag
No need for the warning, the OP asked for a JQ answer, and so he/she shall receive. – Ben
3 upvote
  flag
jQuery will at least take care of any cross-browser compatibility issues with the different JavaScript APIs. – Henry Heleine
5 upvote
  flag
Why on earth would you ever do this. JQuery is meant as a DOM manipulation library. Not for this. This solution is a bad solution. The OP asked for JQuery and the answer should be to tell the OP that JQuery is not needed and not used for this. The right tool for the right job. JQuery is great for DOM but should not be forced to do things its not meant to do. – Patrick W. McMahon
5 upvote
  flag
This is a really, really bad answer and I'm stunned by the number of votes it has received. The attr() method is used for setting attribute values on DOM objects. Using it for this is counter to the intention of the method and thus you cannot possibly guarantee that this method will work in the future. – Nick Coad
1 upvote
  flag
As the location object is supported in literally every browser in use today, there's no way using jQuery will make this code more "cross-browser" – rvighne
1 upvote
  flag
People, maybe jQuery it is not required to redirect. Maybe jQuery is NOT the Right Way™ to redirect. Maybe OP didn't really mean jQuery, just Javascript. But the fact is you can redirect with jQuery and if, for any reason, you want to do it, this is the (kinda hacky) way to do it. I think that this answer, warning included is the best way to answer this question as it is stated. – xDaizu
upvote
  flag
IF you use jQuery for this, use .prop() , because of what @Tim Down said :-) – jave.web
1 upvote
  flag
Actually the question is how to makeit with JQUERY, not how to do it on plain vanilla javascript. This should be the answer. – moplin
1 upvote
  flag
If you know exactly what jQuery does you know it literally is doing a million operations just to set "location.href". This is not browser cross-compatible, it does not save bandwidth. But if you want a run through of what happens: 1) $() is a function that wraps, arrays and objects, and things in the DOM (what it's meant for), In this case 'location' is a object. "attr" sets a certain key on that object, after going another million operations. None of those operations include browser checks for this case because no such thing exists. It's just a waste to set an object's property. – kezi

This works for every browser:

window.location.href = 'your_url';

This works with jQuery:

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

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");
upvote
  flag
JQuery is arguably a better idea as it could abstract away future browser changes/deprecations – Epirocks

Standard "vanilla" JavaScript way to redirect a page:

window.location.href = 'newPage.html';


If you are here because you are losing HTTP_REFERER when redirecting, keep reading:


The following section is for those using HTTP_REFERER as one of many secure measures (although it isn't a great protective measure). If you're using Internet Explorer 8 or lower, these variables get lost when using any form of JavaScript page redirection (location.href, etc.).

Below we are going to implement an alternative for IE8 & lower so that we don't lose HTTP_REFERER. Otherwise you can almost always simply use window.location.href.

Testing against HTTP_REFERER (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)


Simple cross-browser testing solution (fallback to window.location.href for Internet Explorer 9+ and all other browsers)

Usage: redirect('anotherpage.aspx');

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

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

    // All other browsers can use the standard window.location.href (they don't lose HTTP_REFERER like Internet Explorer 8 & lower does)
    else { 
        window.location.href = url; 
    }
}
45 upvote
  flag
Foot note: checking for referrer as a security measure is a lousy solution. duckduckgo.com/?q=referrer+spoofing – droope
upvote
  flag
Hi, is there an ASP MVC equivalent of this? – user3390927
upvote
  flag
If you have an HTTP GET session ID in the referrer URL it can be used to check that against the session for validity. – Andrew Fox
upvote
  flag
@mcpDESIGNS are you sure that you've tried to use location.assign? I use in my app with IE8, and I don't lose the HTTP_REFERER header. – Buzinas

But if someone 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.

upvote
  flag
window.location.replace(window.location.protocol + "//" + window.location.host) – moala
10 upvote
  flag
even simpler: window.location = '/' – Iftah
3 upvote
  flag
Iftah - that is dependant on the "base" meta tag. – Rob Quist

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";
});
upvote
  flag
But the question is asking for JQuery, which might abstract away future browser changes. – Epirocks

I also think that location.replace(URL) is the best way, but if you want to notify the search engines about your redirection (they don't analyze JavaScript code 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 has Internet Explorer support to pass the HTTP referrer.

Sample code without delay looks like this:

<!-- Place this snippet right after opening the head tag to make it work properly -->

<!-- This code is licensed under GNU GPL v3 -->
<!-- You are allowed to freely copy, distribute and use this code, but removing author credit is strictly prohibited -->
<!-- Generated by http://insider.zone/tools/client-side-url-redirect-generator/ -->

<!-- REDIRECTING STARTS -->
<link rel="canonical" href="https://yourdomain.com/"/>
<noscript>
    <meta http-equiv="refresh" content="0;URL=https://yourdomain.com/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
    var url = "https://yourdomain.com/";
    if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
    {
        document.write("redirecting..."); // Don't remove this line or appendChild() will fail because it is called before document.onload to make the redirect as fast as possible. Nobody will see this text, it is only a tech fix.
        var referLink = document.createElement("a");
        referLink.href = url;
        document.body.appendChild(referLink);
        referLink.click();
    }
    else { window.location.replace(url); } // All other browsers
</script>
<!-- Credit goes to http://insider.zone/ -->
<!-- REDIRECTING ENDS -->

First write properly. You want to navigate within an 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 I also have code, if you want.

upvote
  flag
But the question is asking for JQuery – Epirocks

Write the below code after the PHP, HTML or jQuery section. If in the middle of the PHP or HTML section, then use the <script> tag.

location.href = "http://google.com"

In JavaScript and jQuery we can use the following code to redirect the one page to another page:

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

jQuery is not needed. You can do this:

window.open("URL","_self","","")

It is that easy!

The best way to initiate an HTTP request is with document.loacation.href.replace('URL').

upvote
  flag
If jQuery is not nessesary, then all the better! – MayorMonty
1 upvote
  flag
But surely JQuery is never necessary? Isn't it built on top of normal javascript – Epirocks
upvote
  flag
Well, yes, but jQuery can make things easier – MayorMonty

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.search.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:////allinonescript.com

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

Link to Documentation

And that's how you make a Simple redirect page with JavaScript

Edit:

There is also one thing to note. I have added window.location.replace in my code because I think it suits a redirect page, but, you must know that when using window.location.replace and you get redirected, when you press the back button in your browser it will not got back to the redirect page, and it will go back to the page before it, take a look at this little demo thing.

Example:

The process: store home => redirect page to google => google

When at google: google => back button in browser => store home

So, if this suits your needs then everything should be fine. If you want to include the redirect page in the browser history replace this

if( url ) window.location.replace(url);

with

if( url ) window.location.href = url;

Try this:

location.assign("http://www.google.com");

Code snippet of example.

Here is a time-delay redirection. You can set the delay time to whatever you want:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Your Document Title</title>
    <script type="text/javascript">
        function delayer(delay) {
            onLoad = setTimeout('window.location.href = "http://www.google.com/"', delay);
        }
    </script>
</head>

<body>
    <script>
        delayer(8000)
    </script>
    <div>You will be redirected in 8 seconds!</div>
</body>

</html>
5 upvote
  flag
better do this: setTimeout(function() {window.location.href = "google.com/";}, delay); – dikkini

You can use it like in the following code where getGuestHouseRequestToForward is the request mapping (URL). You can also use your URL.

function savePopUp(){
    $.blockUI();
    $.ajax({
        url:"saveForwardingInformationForGuestHouse?roomType="+$("#roomType").val(),
        data: $("#popForm").serialize(),
        dataType: "json",
        error: (function() {
            alert("Server Error");
            $.unblockUI();
    }),
    success: function(map) {
        $("#layer1").hide();
        $.unblockUI();
        window.location = "getGuestHouseRequestToForward";
    }
});

This is for the same context of the application.

If you want to use only jquery specific code then following code may help:

 $(location).attr('href',"http://www.google.com");
 $jq(window).attr("location","http://www.google.com");
 $(location).prop('href',"http://www.google.com"); 

JavaScript provides you many methods to retrieve and change the current URL which is displayed in browser's address bar. All these methods uses the Location object, which is a property of the Window object. You can create a new Location object that has the current URL as follows..

var currentLocation = window.location;

Basic Structure of a URL

<protocol>//<hostname>:<port>/<pathname><search><hash>

enter image description here

  1. Protocol -- Specifies the protocol name be used to access the resource on the Internet. (HTTP (without SSL) or HTTPS (with SSL))

  2. hostname -- Host name specifies the host that owns the resource. For example, www.//allinonescript.com. A server provides services using the name of the host.

  3. port -- A port number used to recognize a specific process to which an Internet or other network message is to be forwarded when it arrives at a server.

  4. pathname -- The path gives info about the specific resource within the host that the Web client wants to access. For example, //allinonescript.com/index.html.

  5. query -- A query string follows the path component, and provides a string of information that the resource can utilize for some purpose (for example, as parameters for a search or as data to be processed).

  6. hash -- The anchor portion of a URL, includes the hash sign (#).

With these Location object properties you can access all of these URL components

  1. hash -Sets or returns the anchor portion of a URL.
  2. host -Sets or returns the hostname and port of a URL.
  3. hostname -Sets or returns the hostname of a URL.
  4. href -Sets or returns the entire URL.
  5. pathname -Sets or returns the path name of a URL.
  6. port -Sets or returns the port number the server uses for a URL.
  7. protocol -Sets or returns the protocol of a URL.
  8. search -Sets or returns the query portion of a URL

Now If you want to change a page or redirect the user to some other page you can use the href property of the Location object like this

You can use the href property of the Location object.

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

Location Object also have these three methods

  1. assign() -- Loads a new document.
  2. reload() -- Reloads the current document.
  3. replace() -- Replaces the current document with a new one

You can use assign() and replace methods also to redirect to other pages like these

location.assign("http://www.//allinonescript.com");

location.replace("http://www.//allinonescript.com");

How assign() and replace() differs -- The difference between replace() method and assign() method(), is that replace() removes the URL of the current document from the document history, means it is not possible to use the "back" button to navigate back to the original document. So Use the assign() method if you want to load a new document, andwant to give the option to navigate back to the original document.

You can change the location object href property using jQuery also like this

$(location).attr('href',url);

And hence you can redirect the user to some other url.

You need to put this line in your code

$(location).attr('href',"http:////allinonescript.com");

If u are not having the Jquery, go with javascript with

window.location.replace("http:////allinonescript.com");
upvote
  flag
what the point of wrapping everything in jquery? – ruX

Use:

// window.location
window.location.replace('http://www.example.com')
window.location.assign('http://www.example.com')
window.location.href = 'http://www.example.com'
document.location.href = '/path'

// window.history
window.history.back()
window.history.go(-1)

// window.navigate; ONLY for old versions of Internet Explorer
window.navigate('top.jsp')


// Probably no bueno
self.location = 'http://www.example.com';
top.location = 'http://www.example.com';

// jQuery
$(location).attr('href','http://www.example.com')
$(window).attr('location','http://www.example.com')
$(location).prop('href', 'http://www.example.com')
5 upvote
  flag
window.navigate is old-IE-only (Firefox/Chrome do not support this). If you want to enumerate all options, don't forget about document.location. – Rob W
97 upvote
  flag
This does not explain anything at all. What is someone supposed to pick? Pick one randomly from the list? Also, what does this add to the existing answers? – Léo Lam
upvote
  flag
document.location = document.referrer; Please add it in list also. This does not work like History.back rather makes the page Refresh again. – Ali Humayun
35 upvote
  flag
This answer is currently discussed at meta – Bergi
upvote
  flag
.attr() will not work on jQuery 3.0.0. use .val() instead. – Rivalus
1 upvote
  flag
@LéoLam That's why there is a search engine called Google. :-) You can search each each one on Google and find the difference. You don't want to pick one randomly. – I am the Most Stupid Person
1 upvote
  flag
@IamtheMostStupidPerson exactly my point. The answer is useless. – Léo Lam
<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>
1 upvote
  flag
The question is asking for JQuery face palm – Epirocks

# HTML Page Redirect Using jQuery/JavaScript

Try this example code:

function YourJavaScriptFunction()
{
    var i = $('#login').val();
    if (i == 'login')
        window.location = "login.php";
    else
        window.location = "Logout.php";
}

If you want to give a complete URL as window.location = "www.google.co.in";.

upvote
  flag
"Using jQuery" is um, inaccurate. And the example of using a complete URL won't work, as that's not a complete URL. There's no protocol, so it'll be interpreted as a relative URL. – 1j01

This is how I use it.

   window.location.replace('yourPage.aspx');   
   // If you're on root and redirection page is also on the root

   window.location.replace(window.location.host + '/subDirectory/yourPage.aspx');

   // If you're in sub directory and redirection page is also in some other sub directory.
1 upvote
  flag
@Phil you ever came across sub directories in you application suppose if you're on url.com/admin/login.aspx you want to go to url.com/customer/orders.aspx window.location.host will give you url.com then you can append your sub directory and page – dnxit
upvote
  flag
The question is asking for JQuery anyway, but this whole thread is full of people repeating the answer above them. – Epirocks

Should just be able to set using window.location.

Example:

window.location = "http://www.//allinonescript.com";

Here is a past post on the subject:

How to redirect to another webpage in JavaScript/jQuery?

upvote
  flag
It maybe works, but I am not sure if this the right way to do it. I'm not see documentation that support this. It could leads programmers to a bad programming practices. – Jaider

There are three main ways to do this,

window.location.href='blaah.com';
window.location.assign('blaah.com');

and...

window.location.replace('blaah.com');

The last one is best, for a traditional redirect, because it will not save the page you went to before being redirected in your search history. However, if you just want to open a tab with JavaScript, you can use any of the above.1

EDIT: The window prefix is optional.

upvote
  flag
Again, the question is asking for JQuery – Epirocks

Before I start, jQuery is a JavaScript library used for DOM manipulation. So you should not be using jQuery for a page redirect.

A quote from Jquery.com:

While jQuery might run without major issues in older browser versions, we do not actively test jQuery in them and generally do not fix bugs that may appear in them.

It was found here: https://jquery.com/browser-support/

So jQuery is not an end-all and be-all solution for backwards compatibility.

The following solution using raw JavaScript works in all browsers and have been standard for a long time so you don't need any libraries for cross browser support.

This page will redirect to Google after 3000 milliseconds

<!DOCTYPE html>
<html>
    <head>
        <title>example</title>
    </head>
    <body>
        <p>You will be redirected to google shortly.</p>
        <script>
            setTimeout(function(){
                window.location.href="http://www.google.com"; // The URL that will be redirected too.
            }, 3000); // The bigger the number the longer the delay.
        </script>
    </body>
</html>

Different options are as follows:

window.location.href="url"; // Simulates normal navigation to a new page
window.location.replace("url"); // Removes current URL from history and replaces it with a new URL
window.location.assign("url"); // Adds new URL to the history stack and redirects to the new URL

window.history.back(); // Simulates a back button click
window.history.go(-1); // Simulates a back button click
window.history.back(-1); // Simulates a back button click
window.navigate("page.html"); // Same as window.location="url"

When using replace, the back button will not go back to the redirect page, as if it was never in the history. If you want the user to be able to go back to the redirect page then use window.location.href or window.location.assign. If you do use an option that lets the user go back to the redirect page, remember that when you enter the redirect page it will redirect you back. So put that into consideration when picking an option for your redirect. Under conditions where the page is only redirecting when an action is done by the user then having the page in the back button history will be okay. But if the page auto redirects then you should use replace so that the user can use the back button without getting forced back to the page the redirect sends.

You can also use meta data to run a page redirect as followed.

META Refresh

<meta http-equiv="refresh" content="0;url=http://evil.com/" />

META Location

<meta http-equiv="location" content="URL=http://evil.com" />

BASE Hijacking

<base href="http://evil.com/" />

Many more methods to redirect your unsuspecting client to a page they may not wish to go can be found on this page (not one of them is reliant on jQuery):

https://code.google.com/p/html5security/wiki/RedirectionMethods

I would also like to point out, people don't like to be randomly redirected. Only redirect people when absolutely needed. If you start redirecting people randomly they will never go to your site again.

The next part is hypothetical:

You also may get reported as a malicious site. If that happens then when people click on a link to your site the users browser may warn them that your site is malicious. What may also happen is search engines may start dropping your rating if people are reporting a bad experience on your site.

Please review Google Webmaster Guidelines about redirects: https://support.google.com/webmasters/answer/2721217?hl=en&ref_topic=6001971

Here is a fun little page that kicks you out of the page.

<!DOCTYPE html>
<html>
    <head>
        <title>Go Away</title>
    </head>
    <body>
        <h1>Go Away</h1>
        <script>
            setTimeout(function(){
                window.history.back();
            }, 3000);
        </script>
    </body>
</html>

If you combine the two page examples together you would have an infant loop of rerouting that will guarantee that your user will never want to use your site ever again.

2 upvote
  flag
You don't need jQuery for redirect. No one needs jQuery for redirecting. – Patrick W. McMahon
4 upvote
  flag
But you don't need JQuery for anything, you can do everything without JQuery. The question was asking for JQuery. – Epirocks
3 upvote
  flag
I address his request for jQuery by saying it's not needed. JQuery has a lot of great useful shortcuts for JavaScript but there is no need for any shortcuts for redirects. JQuery is just JavaScript. Nothing more. The normal way to call a redirect will work with his functions using jQuery. – Patrick W. McMahon
1 upvote
  flag
There's something called the right tool for the right job. Using jQuery to do redirects is like using the handle of a screwdriver to hammer a nail. You can do it but there are easier ways. – Patrick W. McMahon
upvote
  flag
Patrick, by your own logic there is no need for JQuery in all situations. The whole point is convenience, and the question asked for it. The best tool I'd say is the JQuery version because it will probably abstract away browser specifics for the future. So your argument is still null and void. The question asked for JQuery. – Epirocks
upvote
  flag
You may be right about that currently, however you are not able to see the future and cannot at this time predict how future proof it is. And the fact remains the question asked for JQuery! – Epirocks
upvote
  flag
"Yeah JavaScript could change and if it changes then jQuery then needs to change as jQuery is JavaScript. – Patrick W. McMahon yesterday" Thankyou, I rest my case. – Epirocks
upvote
  flag
You have no case. JQuery has a higher chance to change then JavaScript. New version of JQuery get realest all the time and old jQuery becomes obsolete and them makes problems will code reliant on a set version of JQuery. – Patrick W. McMahon
upvote
  flag
JQuery frequently breaks from version to version. Many drupal and wordpress plugins often only work with set jQuery version's and will not work with newer ones. – Patrick W. McMahon
upvote
  flag
Multiple jQuery version's have changed everything about jQuery and was not backwards compatible – Patrick W. McMahon
upvote
  flag
Hence keeping up-to-date with the latest one. 1.9 was a big one, the breaking changes are documented. Version 2.0 don't like IE 8 and lower, and quite rightly so. So it depends what you mean by broken. Changes are to get JQuery onto a better path and better able to handle changes. – Epirocks
upvote
  flag
JQuery has changed and has had version problems so based on it's past you can't say it will not happen again. – Patrick W. McMahon

You can redirect in jQuery like this:

$(location).attr('href', 'http://yourPage.com/');

Here is the code to redirect to some other page with a timeout of 10 seconds.

<script>
    function Redirect()
    {
        window.location="http://www.adarshkr.com";
    }

    document.write("You will be redirected to a new page in 10 seconds.");
    setTimeout('Redirect()', 10000);
</script>

You can also do it like this, on click of a button using location.assign:

<input type="button" value="Load new document" onclick="newPage()">
<script>
    function newPage() {
        window.location.assign("http://www.adarshkr.com")
    }
</script>
upvote
  flag
don't use inline click events. Bad practice and is not going to be supported in future iterations of all web browsers. – Patrick W. McMahon
upvote
  flag
Not JQuery, as the original question is asking – Epirocks

Use the jQuery function:

$.extend({
  redirectPost: function(location, args) {
    var form = '';
    $.each(args, function(key, value) {
      form += '<input type="hidden" name="' + key + '" value="' + value + '">';
    });
    $('<form action="' + location + '" method="POST">' + form + '</form>').appendTo($(document.body)).submit();
  }
});

In your code you use it like this:

$.redirectPost("addPhotos.php", {pimreference:  $("#pimreference").val(), tag: $("#tag").val()});

Redirecting User using jQuery/JavaScript

By using the location object in jQuery or JavaScript we can redirect the user to another web page.

In jQuery

The code to redirect the user from one page to another is:

var url = 'http://www.example.com';
$(location).attr('href', url);

In JavaScript

The code to redirect the user from one page to another is:

var url = 'http://www.example.com';
window.location.href = url;

Or

var url = 'http://www.example.com';
window.location = url;

To just redirect to a page:

  window.location.href = "/destination.html";

Or if you need a delay:

setTimeout(function () {
  window.location.href = "/destination.html";
}, 2000);   // Time in milliseconds

jQuery allows you to select elements from a web page with ease. You can find anything you want in a page and then use jQuery to add special effects, react to user actions, or show and hide content inside or outside the element you have selected. All these tasks start with knowing how to select an element.

function redirect () {
    $('selection').animate({
        marginLeft: 100px; //Put some CSS animation here
    }, 500, function () {
      // OK, finished jQuery staff, let's go redirect
      window.location.href = "/destination.html";
})

Imagine someone wrote a script/plugin that is 10000 lines of code?! Well, with jQuery you can connect to this code with just a line or two.

I just had to update this ridiculousness with yet another newer jQuery method:

var url = 'http://www.fiftywaystoleaveyourlocation.com';
$(location).prop('href', url);

Javascript:

window.location.href='www.your_url.com';
window.top.location.href='www.your_url.com';
window.location.replace('www.your_url.com');

Jquery:

var url='www.your_url.com';
$(location).attr('href',url);
$(location).prop('href',url);//instead of location you can use window
upvote
  flag
Is there a reason for storing the url in jQuery as a variable, but not with Vanilla? – Edmund Reed

Simply in JavaScript, you can redirect to a specific page by using the following:

window.location.replace("http://www.test.com");

Or

location.replace("http://www.test.com");

Or

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

Using jQuery:

$(window).attr("location","http://www.test.com");

In JavaScript and jQuery we use this following code to redirect the page:

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

But you can make a function in jQuery to redirect the page:

jQuery.fn.redirect=function(url)
{
    window.location.href=url;
}

And call this function:

jQuery(window).redirect("http:////allinonescript.com/")
1 upvote
  flag
Why are you passing window to the jQuery function in this line: jQuery(window).redirect(...)? – A1rPun
upvote
  flag
@A1rPun what i need to pass window ord document ? – Muhammad Waqas
2 upvote
  flag
This doesn't make sense as something that should be a jQuery method. There's no difference between $("div").redirect(url) and $().redirect(url). You could make it a static method, like $.redirect(url) but there's not really much need for that either. jQuery doesn't need to be involved at all. – 1j01

jQuery code to redirect a page or URL

First Way

Here is the jQuery code for redirecting a page. Since, I have put this code on the $(document).ready() function, it will execute as soon as the page is loaded.

var url = "http:////allinonescript.com";
$(location).attr('href',url);

You can even pass a URL directly to the attr() method, instead of using a variable.

Second Way

 window.location.href="http:////allinonescript.com";

You can also code like this (both are same internally):

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

If you are curious about the difference between window.location and window.location.href, then you can see that the latter one is setting href property explicitly, while the former one does it implicitly. Since window.location returns an object, which by default sets its .href property.

Third Way

There is another way to redirect a page using JavaScript, the replace() method of window.location object. You can pass a new URL to the 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 behavior of the back button. Sometime, it's what you want, so use it carefully.

// Doesn't put originating page in history
window.location.replace("http:////allinonescript.com");

Fourth Way

like attr() method (after jQuery 1.6 introduce)

var url = "http:////allinonescript.com";
$(location).prop('href', url);

All way to make a redirect from the client side:

<!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:////allinonescript.com");
            // window.location.replace('http://code.shouttoday.com');

            // Another way to redirect page using JavaScript

            // window.location.assign('http://code.shouttoday.com');
            // window.location.href = 'http://code.shouttoday.com';
            // document.location.href = '/relativePath';

            //jQuery code to redirect a page or URL
            $(document).ready(function(){
                //var url = "http://code.shouttoday.com";
                //$(location).attr('href',url);
                // $(window).attr('location',url)
                //$(location).prop('href', url)
            });
        </script>
    </body>
</html>

ECMAScript 6 + jQuery, 85 bytes

$({jQueryCode:(url)=>location.replace(url)}).attr("jQueryCode")("http://example.com")

Please don't kill me, this is a joke. It's a joke. This is a joke.

This did "provide an answer to the question", in the sense that it asked for a solution "using jQuery" which in this case entails forcing it into the equation somehow.

Ferrybig apparently needs the joke explained (still joking, I'm sure there are limited options on the review form), so without further ado:

Other answers are using jQuery's attr() on the location or window objects unnecessarily.

This answer also abuses it, but in a more ridiculous way. Instead of using it to set the location, this uses attr() to retrieve a function that sets the location.

The function is named jQueryCode even though there's nothing jQuery about it, and calling a function somethingCode is just horrible, especially when the something is not even a language.

The "85 bytes" is a reference to Code Golf. Golfing is obviously not something you should do outside of code golf, and furthermore this answer is clearly not actually golfed.

Basically, cringe.

I already use the function redirect() of JavaScript. It's working.

<script type="text/javascript">
    $(function () {
        //It's similar to HTTP redirect
        window.location.replace("http://www.Technomark.in");

        //It's similar to clicking on a link
        window.location.href = "Http://www.Technomark.in";
    })
</script>
7 upvote
  flag
what is the difference between this answer and the first ? – Mimouni
8 upvote
  flag
@IlyasMimouni Well, there's the color scheme... – BobRodes

You can use:

window.location.replace("http://www.example.com/");

The replace() method does not save the originating page in the session history, so the user can't go back using the back button and again get redirected. NOTE: The browser back button will be deactivated in this case.

However, if you want an effect the same as clicking on a link you should go for:

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

In this case, the browser back button will be active.

This is very easy to implement. You can use:

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

This will remember the history of the previous page. So one can go back by clicking on the browser's back button.

Or:

window.location.replace("http://www.example.com/");

This method does not remember the history of the previous page. The back button becomes disabled in this case.

You can redirect the page by using the below methods:

  1. By using a meta tag in the head - <meta http-equiv="refresh" content="0;url=http://your-page-url.com" />. Note that content="0;... is used for after how many seconds you need to redirect the page

  2. By using JavaScript: window.location.href = "http://your-page-url.com";

  3. By using jQuery: $(location).attr('href', 'http://yourPage.com/');

upvote
  flag
There is no reason to use jQuery for this and window. is unnecessary. – 1j01
upvote
  flag
Where i have used window. in jquery Query Example ? ... if you want to redirect the page through javascript ... than you need to use window.location.. – santoshK
upvote
  flag
I meant those as separate things: you shouldn't use jQuery for this, and in the JavaScript example, you can simplify window.location.href = to location.href = or even location =. – 1j01
upvote
  flag
Yes location.href = would be better option to redirect the page -:) – santoshK

Use:

function redirect(a) {
    location = a
}

And call it with: redirect([url]);

There's no need for the href after location, as it is implied.

In JQuery,use $(location).attr('href',url):

$(document).ready(function(){
  var url = "https://www.youtube.com/watch?v=JwMKRevYa_M";
  $(location).attr('href',url);//using this 
                        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

In raw JavaScript,there are a number of ways to achieve that:

window.location.href="https://www.youtube.com/watch?v=JwMKRevYa_M"; 

- sets href property explicitly.

window.location = "http://www.GameOfThrones.com";

-does it implicitly Since window.location returns an object, which by default sets it's .href property.

window.location.replace("http://www.//allinonescript.com");

- replaces the location of the current window with the new one.

self.location = "http://www.somewebsite.com";

-sets the location of the current window itself.

Here is an example of JavaScript redirecting after a certain time(3 seconds):

<script>
setTimeout(function() {
  window.location.href = "https://www.youtube.com/";
}, 3000);
</script>

upvote
  flag
Even if you're "in jQuery" (more accurately, you have jQuery available), you shouldn't use it for this purpose. – 1j01
<script type="text/javascript">
    if(window.location.href === "http:////allinonescript.com") {      
         window.location.replace("https://www.google.co.in/");
       }
</script>
3 upvote
  flag
OP wants to know how to do it in jQuery - this does not use jQuery so it does not answer the OP's question – ochi

Using Javascript:

Method 1:

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

Method 2:

window.location.replace("http://google.com");

Using jQuery:

Method 1: $(location)

$(location).attr('href', 'http://google.com');

Method 2: Reusable Function

jQuery.fn.redirectTo = function(url){
	window.location.href = url;
}

jQuery(window).redirectTo("http://google.com");

Basically jQuery is a JavaScript library and for doing some of the things like redirection, you can use pure JavaScript, so in that case you have 3 options using vanilla JavaScript:

1) Using location replace, this will replace the current history of the page, means that it is not possible to use the back button to go back to the original page.

window.location.replace("http:////allinonescript.com");

2) Using location assign, this will keep the history for you and with using back button, you can go back to the original page:

window.location.assign("http:////allinonescript.com");

3) I recommend using one of those previous ways, but this could be the third option using pure JavaScript:

window.location.href="http:////allinonescript.com";

You can also write a function in jQuery to handle it, but not recommended as it's only one line pure JavaScript function, also you can use all of above functions without window if you are already in the window scope, for example window.location.replace("http:////allinonescript.com"); could be location.replace("http:////allinonescript.com");

Also I show them all on the image below:

location.replace

I just add an another way,

To redirect for any specific page/links of your site to another page,

Just add this line of code

<script>
if(window.location.href == 'old_url')
{
    window.location.href="new_url";
}


//Another url redirect
if(window.location.href == 'old_url2')
{
    window.location.href="new_url2";
}
</script>

For real life example,

<script>
if(window.location.href == 'https://old-site.com')
{
    window.location.href="https://new-site.com";
}


//Another url redirect
if(window.location.href == 'https://old-site.com/simple-post.html')
{
    window.location.href="https://new-site.com/simple-post.html";
}
</script>

By using this simple code, you can redirect full site or any single page.

  1. location.assign():

    to assign route path by passing path into it.. Assign will give you an history even after path was assigned.

    Usage Method: value should be pass into it.

    Eg: location.assign("http://google.com")

enter image description here

  1. location.href

    Can define give path into it.. and it will redirect into given path once it setup and it will keep history..

    Usage Method: value should be assign into it.

    Eg: location.href = "http://google.com"

  2. location.replace():

    it will helps to replace path if you dont want to keep history. it wont give you an history once you replace its path.

    Usage Method: value should be pass into it.

    Eg: location.replace("http://google.com")

enter image description here


assign() and href are similar both can hold history. assign will work by passing value and href works by assigning.

You can achieve it using javascript itself without using jQuery by assigning,

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

you can achieve similar using jQuery like below, it will do exactly same like above,

$(window).attr('location',"http://www.google.com");
$(location).attr('href',"http://www.google.com");

you can easily understand difference between both...

Here is the Location object, Location API from chrome

If you want to redirect to a route within the same app simply

window.location.pathname = '/examplepath'

would be the way to go.

Single Page Application, within same app route

window.location.pathname = '/stack';

javascript:

location.href = "http://stack.com";
window.location = "http://stack.com";

Jquery:

$(location).attr('href',"http://www.stack.com");
$(window).attr('location',"http://www.stack.com");

Angular4

import { Router } from '@angular/router';
export class NavtabComponent{
 constructor(private router: Router
  ) { }
       this.router.navigate(['bookings/taxi']);
}

You can use JavaScript code

window.location.replace("pagename.html"); 

This is best way if your website is related with mobile view.

Similar behavior as an HTTP redirect:

window.location.replace("http:////allinonescript.com");

Similar behavior as clicking on a link:

window.location.href = "http:////allinonescript.com";

use this function redirect to another link using javascript

   var url = www.google.com;
   window.open(url, '_blank');
//Your redirect page 
  var url ='http:////allinonescript.com'; 

 //jQuery for redirect
  $(location).attr('href', url);

In My work experience Javascript is much better to redirect.
It depends how you want to change location. If you want to log your website in users history, use window.location.href='ur website'; otherwise to do it without logging in history, use window.location.replace("your website");

    // Sets the new location of the current window.
window.location = "https://www.example.com";

// Sets the new href (URL) for the current window.
window.location.href = "https://www.example.com";

// Assigns a new URL to the current window.
window.location.assign("https://www.example.com");

// Replaces the location of the current window with the new one.
window.location.replace("https://www.example.com");

// Sets the location of the current window itself.
self.location = "https://www.example.com";

// Sets the location of the topmost window of the current window.
top.location = "https://www.example.com";

Not to mention you could just use location since the window object is implied. Or self or top.

With the location object we can do a lot of other neat stuff too like reload the page or change the path and origin of the URL.

There are a few problems here:

  • JavaScript needs to be enabled and downloaded/executed for this to work at all.
  • It's not clear how search engines react to this.
  • There are no status codes involved, so you can't rely information about the redirect.

Using location.replace() will redirect you but without saving the history of the previous page. This better to use when a form is submitted. But when you want to keep your history you have to use location.href=//path

Examples:

// form with steps
document.getElementById('#next').onclick = function() {
   window.location.href='/step2' // iteration of steps;
}

// go to next step
document.getElementById("#back').onclick = function() {
   window.history.back();
}

// finish 
document.getElementById("#finish').onclick = function() {
   window.location.href = '/success';
}

// on success page
window.onload = function() {
    setTimeout(function() {
       window.location.replace('/home'); // i can't go back to success page by pressing the back button
    },3000);
}

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