Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design and consultancy

blog

  1. Home
  2. blog
  3. read
  4. How to Change the URL in JavaScript: Redirecting
  • dislike -4 19

    How to Change the URL in JavaScript: Redirecting

    1. June 2021
    2. Daily
    3. read 0

    In this quick article, we’ll discuss how to change the URL in JavaScript by redirecting. We’ll go through a couple of different methods that you can use to perform JavaScript redirects.

    JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern web browsers support it without the need for plugins. In this series, we’re discussing different tips and tricks that might help you in your day-to-day JavaScript development.

    When you’re working with JavaScript, you often need to redirect users to a different page. JavaScript provides different ways of doing that.

    Today, we’ll discuss how to perform URL redirections in vanilla JavaScript and with the jQuery library.

    How to Change the URL in Vanilla JavaScript

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

    The location.href Method

    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 returns the value of the current URL. Similarly, you can also use it to set a new URL, and users will then be redirected to that URL.

    Let’s go through 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

    As you can see, it’s fairly easy to redirect users with the location.href method. Since the location object is part of the window object, the above snippet can also be written as:

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

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

    The location.assign Method

    The location.assign method works very similarly to the location.href method and allows you to redirect users to a different web page.

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

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

    As you can see, it’s pretty straightforward. You just need to pass the URL in the first argument of the assign method, and it will redirect users to that URL. It’s important to note that the assign method maintains the state of the History object. We’ll discuss this in detail in the next section.

    The location.replace Method

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

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

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

    Although the location.replace method looks very similar to the location.href and location.assign methods of redirecting users to a different URL, there’s an important difference between them. When you use the location.replace method, the current page won’t be saved in the session, and it’s actually removed from the JavaScript History object. So users won’t be able to use the back button to navigate to it.

    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 different 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');

    In the above example, we’ve assumed that a user is browsing the https://code.tutsplus.com webpage. Next, we have used the location.href method to redirect the user to the https://design.tutsplus.com webpage. Finally, we’ve used the location.replace method to redirect the user to the https://business.tutsplus.com webpage. Now, if the user clicks on the back button, it would go back to https://code.tutsplus.com instead of https://design.tutsplus.com, since we’ve used the location.replace method, and it has actually replaced the current URL with https://business.tutsplus.com in the History object.

    So you should understand the difference between location.replace and other methods before you use them. You can’t use them interchangeably since the location.replace method alters the state of the JavaScript History object. And thus, if you want to preserve the state of the History object, you should use other methods of redirecting users.

    How to Perform URL Redirections With jQuery

    Although vanilla JavaScript offers enough options when it comes to URL redirection, if you’re still wondering how to do it with the jQuery library, we’ll quickly go through it in this section.

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

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

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

    So that’s it for the different ways of performing JavaScript redirects. And with that, we’ve reached the end of this quick article as well.

    Conclusion

    Today, we discussed how you can implement JavaScript redirects. We discussed different methods that you can use to perform JavaScript redirects, along with some examples.

    Photo

    martijn broeders

    founder/ strategic creative at shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 434 210 0245
    Add a comment...
    4elements
    Comments

By - category

    By - date

      Copyright © 1999 - 2025 Shineyrock web design and consultancy, All Rights Reserved / Terms of Conditions / Sitemap: XML, HTML, Images, Mobile, News