js window location relative path

JS Window Location Relative Path#

As a web developer, it's important to understand how to work with paths in JavaScript. Sometimes, you may want to get the relative path of the current page, or navigate to a new page using a relative path. This is where the window.location object comes in handy.

Getting the Relative Path#

To get the relative path of the current page, you can use the window.location.pathname property. This property returns the path of the current page relative to the domain name. For example:

      const relativePath = window.location.pathname;
      console.log(relativePath); // Output: "/blog/my-post.html"
    

In the above example, the relativePath variable will contain the value "/blog/my-post.html" if the current page is example.com/blog/my-post.html.

Navigating to a Relative Path#

You can also use the window.location object to navigate to a new page using a relative path. To do this, you can set the href property of the object to the relative path of the new page. For example:

      window.location.href = "/blog/my-post.html";
    

In the above example, the browser will navigate to the page located at /blog/my-post.html.

Using Relative Paths with Other Objects#

It's worth noting that you can also use relative paths with other objects in JavaScript, such as the XMLHttpRequest object for making AJAX requests. In this case, you would simply construct the relative path as a string and pass it to the object. For example:

      const xhr = new XMLHttpRequest();
      xhr.open("GET", "/api/posts");
      xhr.send();
    

In the above example, the AJAX request is being made to the /api/posts endpoint relative to the domain name.

Overall, understanding how to work with relative paths is an important skill for any web developer. By leveraging the window.location object and other JavaScript objects, you can easily work with relative paths in your web applications.