JavaScript Redirect to New URL

Looking to redirect your users to a new URL without them knowing? Here's how to do it with JavaScript!

If you’re looking to redirect your users to a new URL, then JavaScript is the perfect language to use. With just a few lines of code, you can easily set up a redirect that will take your users to the new URL automatically.

There are two ways to accomplish this: using the window.location.href property, or using the window.location.replace() method.

If you want to simulate someone clicking on a link, you would use the href property. This will keep the originating page in the session history, meaning the user can click the back button and return to it.

If you want to simulate an HTTP redirect, you would use the replace() method. This will not keep the originating page in the session history, meaning the user will not be able to click the back button and return to it.

For example:

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

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

There are lots of ways to redirect a website visitor to another web page. You can use the window.location object, the window.history object, or even jQuery.

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

How to redirect a page using vanilla JavaScript?

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

As some of you might know, the HTTP_REFERER variable is unreliable in Internet Explorer 8 and lower. This can cause problems when trying to use it as a security measure, as the variable can be easily spoofed.

However, there is a workaround that can be used to maintain security while still allowing users of IE8 and lower to access the website.

We can use the following code to redirect users of IE8 and lower to the desired page:

window.location.href = 'anotherpage.aspx';

This will ensure that the HTTP_REFERER variable is maintained, and that users of IE8 and lower can still access the website.

Redirect (‘anotherpage.aspx’); If you want to redirect to another page, you can use the redirect function.

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

So there you have it! With just a few lines of code, you can redirect your users to a new URL.

Thanks, and happy coding!