How to redirect to another web page in JavaScript

This article contains information on how to redirect to another page in a programmatic way. This method has both advantages and disadvantages and we will discuses them in detail.

Custom client side redirections are useful in situations when you make a web application and the active page must be changed due to some conditions. For example, user is filling the form and you want to show a thank you page, or user has chosen some option on a page and you'd like to navigate the browser to a different site, etc.

However, you should always remember that JavaScript redirections may not work if the custom scripts on a page cannot be executed. For example, most of the search engines usually download and parse static HTML content on a page and in that case you should consider using server side redirections.

Now, it's time to list possible ways of how to redirect to another page in JavaScript code, and you can use any such method in your web application.

window.location object

The location property of the window object returns various information about current location of the document. This article contains description only of the functions and properties that can be used to redirect web pages.

The first method is very simple. You can modify the "href" property directly and assign URL of the new location. Please see the code sample below.

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

Also, you can also use the assign() function to redirect to the URL, which is specified as a parameter in a function call.

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

There is a method which is slightly different from the others given above. You can call the replace() function of the location object and provide URL to redirect to, however the active page will not be saved in browser history and user will not be able to navigate in a backward direction.

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

window.history object

The history property contains methods which allow to manipulate browser history. If you call the back() function, the browser will go back to the previous page. Example is given below and as you can see there, no any additional parameters are required.

window.history.back();

The forward() function does the opposite thing. You can use it to navigate browser to the next page in the history.

window.history.forward();

Another option is to use the go() function, which allows to redirect browser in both directions. If the positive value is given, then the browser goes in a forward direction, in case of negative value, the browser goes back. There is only one parameter and it specifies number of pages to go in a specific direction. See how to use it in a code block below, the function is called with a negative number.

window.history.go(-1);

Also, you may see the same function call with a positive number, it instructs the browser to go forward.

window.history.go(1);

How to redirect to another web page in jQuery

The jQuery library contains attr() method which can be used to set different properties for the matched elements. And we can use that function to modify the "href" property of the location object, see how to make it the code example below.

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

The alternative way is to directly change the location property of the window object, the page will be redirected in that case as well.

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

The example below is also an acceptable way of redirecting to another page but the main difference is that the prop() method is used there, which allows to make modifications directly on the DOM tree in the browser.

$(location).prop("href", "http://www.example.com");

Conclusion

As you have seen in this article, there are different ways of changing the user's primary location in a browser and which one to use is a matter of application design or personal preference.

For native JavaScript or TypeScript web applications, obviously, the jQuery method is not acceptable since this library may not be loaded into the browser. Of course you can attach it to your project, but then the size of static resources will be much larger and it can have an impact on initial page loading.

Although, if the jQuery library is already added to the site, then using it is an attractive option as your new code will be consistent with the existing project.

Thank you for reading this article and feel free to post any questions in the following form.

Leave a Reply

Your email address will not be published. Required fields are marked *