How to redirect to another webpage?

0 votes
asked Feb 2, 2009 by venkatachalam

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

26 Answers

0 votes
answered by iconnor

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

And if you go to that link it will automatically redirect you to stackoverflow.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;
0 votes
answered by nadeem-yasin

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.

0 votes
answered Feb 2, 2009 by tvanfosson

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 votes
answered Feb 3, 2009 by ryan-mcgeary

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

// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
0 votes
answered Feb 22, 2010 by fred

This works for every browser:

window.location.href = 'your_url';
0 votes
answered Feb 5, 2011 by xloadx

This works with jQuery:

$(window).attr("location", "http://google.fr");
0 votes
answered Feb 14, 2012 by swaprks

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 votes
answered Feb 23, 2012 by scorpion

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 votes
answered Feb 27, 2012 by mark-pieszak

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; 
    }
}
0 votes
answered Jan 6, 2013 by anup

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.

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
...