In this quick article, we’ll discuss how to change urls in JavaScript through redirection. We’ll go through several different methods that you can use to perform JavaScript redirects.

JavaScript is one of the core technologies of the web. Most web sites use it, and all modern Web browsers support it without plug-ins. In this series, we’ll discuss different tips and tricks that might help you in your daily JavaScript development.

When you work with JavaScript, you often need to redirect users to different pages. JavaScript provides different methods that you can use to implement it.

Today, we will discuss how to perform URL redirection in Vanilla JavaScript and using the jQuery library.

How to change a URL in Vanilla JavaScript

In this section, we’ll implement URL redirection through the different built-in methods provided by JavaScript. In fact, JavaScript provides a Location object, which is part of a window object that allows you to perform different URL-related operations.

location.hrefmethods

The location.href method is one of the most popular ways to perform JavaScript redirects. If you try to get the value of location.href, it will return the value of the current URL. Also, you can use it to set up a new URL, and the user will be redirected to that URL.

Let’s take a look at the following example.

console.log(location.href);
// prints the current URL

location.href = 'https://code.tutsplus.com';
// redirects the user to https://code.tutsplus.com
Copy the code

As you can see, it’s fairly easy to redirect users using the location.href method. Since the Location object is part of the Window object, the above fragment could also be written.

window.location.href = 'https://code.tutsplus.com';
Copy the code

So, in this way, you can use the location.href method to change the URL and redirect the user to a different web page.

location.assignmethods

The Location. assign method works much like the location.href method, allowing you to redirect users to a different web page.

Let’s take a quick look at how it works with the following example.

location.assign('https://code.tutsplus.com');
Copy the code

As you can see, it’s pretty straightforward. All you need to do is pass the URL in the first parameter of the Assign method, and it will redirect the user to that URL. It is worth noting that the Assign method maintains the state of the History object. We’ll discuss this in more detail in the next section.

location.replacemethods

You can also use the location.replace method to perform JavaScript redirects. The location.replace method allows you to perform a redirect by replacing the current URL with a different ONE.

Let’s see how it works with the following example.

location.replace('https://code.tutsplus.com');
Copy the code

Although the location.replace method looks very similar to the location.href and location.assign methods, redirecting the user to a different URL, there is one important difference. When you use the location.replace method, the current page is not saved in the session; it is actually removed from the javascript object. Therefore, users will not be able to navigate to it using the back button.

Let’s try to understand it with the following example.

/ / let's assume that a user is browsing https://code.tutsplus.com / / a user is redirected to a company's page with the location.href method location.href = 'https://design.tutsplus.com'; // a user is redirected to a different page with the location.replace method location.replace('https://business.tutsplus.com');Copy the code

In the example above, we have been assuming that the user is the https://code.tutsplus.com website. Next, we use the location. The href method redirects the user to the web at https://design.tutsplus.com. Finally, we use the location. The replace method, redirect the user to https://business.tutsplus.com web pages. Now, if the user clicks the back button, it will be returned to https://code.tutsplus.com, not https://design.tutsplus.com, because we have been used for the location. The replace method, It has actually been in the History object by replacing the current URL https://business.tutsplus.com.

Therefore, before you use location.replace and other methods, you should know the difference between them. You cannot use them interchangeably, because the location.replace method changes the state of the JavaScriptHistory object. Therefore, if you want to preserve the state of the History object, you should choose another method to redirect the user.

How to perform URL redirection with jQuery

Although Vanilla JavaScript offers plenty of options for URL redirection, if you’re still looking for ways to do it with the jQuery library, we’ll take a quick look in this section.

In jQuery, you can use the attr method to perform redirects, as shown in the following snippet.

$(location).attr('href', 'https://design.tutsplus.com');
Copy the code

As you can see, it’s pretty easy to redirect users with jQuery!

So these are different methods you can use to do JavaScript redirects. And just like that, we have reached the end of this quick article.

conclusion

Today, we discussed how to implement JavaScript redirection. We discussed the different methods you can use to perform JavaScript redirects and gave some examples.