This article contains information on how to create a code that will redirect users to another web page in a browser. You will see that automatically changing location of a user is a simple task and requires just a few lines of code. The methods described here have both advantages and disadvantages. And we will show a detailed review of each option.
Custom client side redirection can be useful in a situation when you make a web application and the current page must be changed dynamically. It can occur when some conditions have changed. For example, a user is filling the form and you want to show a thank you page, or a user has chosen some option on a page and you'd like to navigate the browser to a different site, and so on.
However, you should always remember that native JavaScript redirection may not work if the scripts are disabled and cannot be executed on a page. For example, most of the search engines usually download and parse static HTML content on a page. And in that case you may consider using the server side redirection, like the Location response header.
Ok, now it's time to show possible options that can be used in a code to redirect users to another web page in a JavaScript application. Then, you can choose which method to use in your web project.
Modifying the window.location object
The "location" property of the "window" object returns various information about the current location of the document. This section contains description of only the functions and properties that can be used to redirect users to another web page.
The first method is very simple. You can modify the "href" property directly and assign the URL of the new location. Please see the code sample below.
window.location.href = "http://www.example.com";In addition, you can use the assign() method to redirect users to the new URL. The value has to be specified as an argument in a function call. Example is given below.
window.location.assign("http://www.example.com");There is a method which is slightly different from the other options given above. You can call the replace() method of the "location" object and provide a desired URL. The user will be redirected to the new location. However the active page will not be saved in a browser history. As a result, it will not be possible to navigate in a backward direction.
Below you can see how to replace the current web address in a browser.
window.location.replace("http://www.example.com");Using the window.history object
The "history" property of a "window" object contains methods which allow you to directly manipulate the browser history. For example, if you call the back() function, the browser will go back to the previous page. Code sample is given below. As you can see there, no additional arguments are required.
window.history.back();The forward() function does the opposite thing. You can use it to navigate users to the next page in the browser history.
window.history.forward();However, there is another nice option. It's also possible to redirect a user in both directions in a browser. The go() function can be used for that purpose.
If the positive value is given, then the browser goes in a forward direction. In case of a negative value, the browser goes back. There is only one parameter and it specifies the number of pages to go in a specific direction.
See how to use such a functionality in a code block below. The function is called with a negative number.
window.history.go(-1);Also, you may call the same function with a positive number. It will redirect the user in the forward direction. Please see the JavaScript code sample below.
window.history.go(1);How to redirect to another web page in jQuery library
The jQuery library provides the attr() method. It can be used to add or modify various properties for the matched HTML elements. As a result, we can use that function to modify the "href" property of the location object. Please see how it can be done in the code sample below.
$(location).attr("href", "http://www.example.com");However, there is an alternative way. It's possible to directly change the "location" property of the "window" object. In that case, the user will be redirected to the other page as well.
$(window).attr("location","http://www.example.com");The example below is also an acceptable way of redirecting a user to another location. The main difference is that the prop() method is used there. It allows us to modify some property directly in the DOM tree.
$(location).prop("href", "http://www.example.com");Conclusion
As you have seen in this article, there are different ways of changing the primary location of a user in a browser. However, which solution to use is a matter of an application design or personal preference.
For native JavaScript or TypeScript web applications, the jQuery method is not acceptable. That's because the 3rd party library may not be loaded into the browser during runtime. Of course, you can attach the jQuery to your project, but then the size of static resources will be much larger and it can have an impact on the speed of initial page loading.
Although, if the jQuery library is already added to the site, then using it may be a good option. This way, your new code will be consistent with the source of an existing project.
Comments