with - window.location javascript




How do I redirect to another webpage? (20)

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


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

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://.com')

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://.com");

// similar behavior as clicking on a link
window.location.href = "http://.com";

*****THE ORIGINAL QUESTION WAS - "HOW TO REDIRECT USING JQUERY", HENCE THE ANSWER IMPLEMENTS JQUERY >> COMPLIMENTARY USAGE CASE*****

To just redirect to a page with JavaScript:

  window.location.href = "/contact/";

Or if you need a delay:

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

jQuery allows you to select elements from a web page with ease. You can find anything you want on 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 or an event.

     $('a,img').on('click',function(e){
         e.preventDefault();
         $(this).animate({
             opacity: 0 //Put some CSS animation here
         }, 500);
         setTimeout(function(){
           // OK, finished jQuery staff, let's go redirect
           window.location.href = "/contact/";
         },500);
     });

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.


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.


Basically jQuery is just a JavaScript framework and for doing some of the things like redirection in this case, you can just 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://.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://.com");

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

window.location.href="http://.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://.com"); could be location.replace("http://.com");

Also I show them all on the image below:


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.


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>

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

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

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

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>

  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..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, .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..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..com");

location.replace("http://www..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.


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


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

And if you go to that link it will automatically redirect you to .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;

This works for every browser:

window.location.href = 'your_url';

This works with jQuery:

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

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')

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

You need to put this line in your code:

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

If you don't have jQuery, go JavaScript with:

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

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').





redirect