Course: JavaScript

Progress (0%)

  1. Foundation

  2. Numbers

  3. Strings

  4. Conditions

  5. Loops

  6. Arrays

  7. Functions

  8. Objects

  9. Exceptions

  10. HTML DOM

  11. CSSOM

  12. Events

  13. Drag and Drop

  14. opt Touch Events

  15. Misc

  16. Project: Analog Clock

JavaScript Location API

Chapter 81 14 mins

Learning outcomes:

  1. Deconstructing a URL
  2. The location object
  3. Getting the full URL via location.href
  4. Getting the path via location.pathname
  5. Getting the query string via location.search
  6. Getting the hash via location.hash
  7. Other properties of location
  8. Redirecting to a new URL via location.assign()

Introduction

Deconstructing the URL of a webpage to get a specific piece of information out of it is not a rare thing to do. In fact, it's used very often on websites that operate on hash-based navigation.

Being able to effectively retrieve different parts of a document's URL, displayed in the browser's address bar, is an important skill developers must be equipped with. And for that, knowledge of the Location object available on window is a must.

Let's explore it...

Deconstructing a URL

Before we can make sense of the interface provided by the location objects, it's important to first understand what is a URL composed of.

If that is clear, making intuition of location would be peaches and cream. Believe it!

A URL stands for Uniform Resource Locator and is a standard way to point to a particular resource on the World Wide Web.

For example, https://www.codeguage.com/ is a URL. In this case, it points to the home page of the website codeguage.com.

As you may already be aware of, the World Wide Web is full of billions of other URLs — well, it might be way above trillions now. There is just no end to them!

Each URL serves to take the user to a given resource, which is stored at some physical location on our very own planet Earth — typically on a specialized computer configured to host and deliver resources, commonly referred to as a server.

A URL is much like a physical address to, let's say, a home. A mail service follows the address in order to reach the home, and subsequently deliver the desired product.

URLs follow a sophisticated, but intuitive, syntax that clearly paves the way to fetch the underlying resource. They are composed of multiple atomic pieces, each providing with a certain segment of the whole address to the resource on the web.

Below shown is a simple illustration:

scheme://host:port/path?query_string#hash

Let's see what each of these segments means:

  1. The scheme, also referred to as the protocol, specifies whether the website is loaded over an encrypted connection (https) or not (http). These days, more and more websites are turning to https simply because of its benefits.
  2. The host refers to the domain name of the website that the underlying resource belongs to.
  3. The port specifies the port number of the domain. Usually, it's 80 for http and 403 for https.
  4. The path is the physical path to the file on the server. These days, in some cases — in fact, in many cases — the path is artificially made up to replace ugly URLs, thanks to URL rewriting. Such a path doesn't have any physical existence of its own.
  5. The query string is a means of sending data to the server as part of a GET request. It begins with a question mark (?) and consists of parameters separated by an ampersand sign (&).
  6. The hash, also referred to as the anchor, or fragment, is the ending part of the URL including the hash symbol (#). It was originally provided as a means for specifically referring to a given section in an HTML document with the respective id (recall that id selectors in HTML also begin with a hash). However, these days it has grown to become more useful than just that — it's used along with AJAX to navigate web applications without the need to reload the whole page.

So these are the individual components that make up a URL.

With this information in mind, it's time to see what does location has to offer us in extracting out these components from the current document's URL.

The location object

The location property on the global window object in JavaScript points to a location object that holds information regarding the current webpage's URL.

The information is exposed as individual properties of the object, all of which contain string values.

The properties of location are listed as follows:

  1. href — holds the complete URL of the current page.
  2. protocol — holds the protocol of location.href, including the : character after the protocol.
  3. host — holds the host of location.href.
  4. hostname — holds just the name of the host of location.href.
  5. port — holds the port number of location.href.
  6. pathname — holds the path of location.href, including the / character.
  7. search — holds the query string of location.href.
  8. hash — holds the hash of location.href, including the # character.

Apart from these properties, the location object also provides with a couple of methods to work with:

They are listed as follows:

  1. assign() — redirects to the provided URL.
  2. reload() — refreshes the current webpage.
  3. replace() — replaces the current history entry with the provided URL, and then redirects to that URL.
  4. toString() — alias for location.href.

Of these four, replace() and toString() are fairly new and therefore have a relatively inconsistent browser support.

Alright, so at this point, hopefully, the properties and methods of location are clear to you. But how to use them to our benefit?

Well, that's a good question.

Let's answer it for each of the utilities shown above...

The whole url — location.href

The href property on location returns the whole URL of the current document.

Shown below is a simple example, where we merely log location.href:

console.log(location.href);
https://www.codeguage.com/courses/js/misc-location

This is just basic stuff.

The hash — location.hash

The location.hash property returns the hash/anchor part of the URL saved in location.href.

One thing to keep in mind is that location.href includes the hash symbol (#).

Shown below is a simple example.

Suppose that the following script is executed on a webpage whose URL is mentioned in the comment at the start of the script:

// suppose that this script is executed at:
// https://www.codeguage.com/#hello

console.log(location.hash);
#hello

If the URL doesn't have any hash in it, then location.hash would return the string '#'.

For instance, if we execute the same code as above on this page, we'd get '#' logged, given that the URL in the browser's address bar is unchanged and doesn't include an anchor following from any action on the webpage.

// suppose that this script is executed on this page with the URL
// https://www.codeguage.com/courses/js/misc-location

console.log(location.hash);
#

The query string — location.search

The location.search property returns the query string of the URL saved in location.href.

Similar to location.hash, it includes the ? symbol that denotes a query string, but there is an exception to this. That is, if the URL stored in location.href doesn't contain a query string, location.search returns '', NOT '?'.

Shown below is a simple example.

As always, we visit a webpage with a query string in its URL, and then display location.search to see what does it return.

// suppose that this script is executed at:
// https://www.codeguage.com/?a=10

console.log(location.search);
?a=10

If the URL doesn't have any query string in it, location.hash returns '?'.

For instance, if we execute the following code, we'd get '' logged following from the evaluation of the ternary operator (?:), given that the URL in the browser's address bar is unchanged. This is because location.search resolves to an empty string (''):

// suppose that this script is executed on this page with the URL
// https://www.codeguage.com/courses/js/misc-location

console.log(location.search === '' ? "''" : location.search);
''
If we had just used the statement console.log(location.search) in the code above, an empty line would've been logged in the console, which wouldn't have been that noticeable in our custom console snippet. Hence, we opted for a conditional expression to output '' if the value of location.search is an empty string.

Path to the resource — location.pathname

As we saw above, location.pathname returns the path of the URL i.e. the segment after the hostname and before the query string and hash.

Note that pathname includes the starting / character.

The word 'pathname' is a single word hence it's not denoted as pathName for the name of the property.

Consider the following code, where we log location.pathname for this very document:

// suppose that this script is executed at:
// https://www.codeguage.com/courses/js/misc-location

console.log(location.pathname);
/courses/js/misc-location

If the current URL contains a query string or an anchor, location.pathname would still return the desired portion of the URL, i.e. the path, as demonstrated below:

// suppose that this script is executed at:
// https://www.codeguage.com/courses/js/misc-location?a=10#b

console.log('Full URL:', location.href);
console.log('Path:', location.pathname);
Full URL: http://www.codeguage.com/courses/js/misc-location?a=10#b
Path: /courses/js/misc-location

pathname and Firefox

According to caniuse.com, Firefox, prior to version 53, has a slight bug in the implementation of location.pathname. That is, sometimes it returns the path and the query string of the URL concatenated together instead of only returning the former.

Rectifying this is quite easy: just check if location.pathname contains the '?' character (using a simple indexOf() call). If it does, slice the remaining portion of the string including the '?' character using the slice() string method.

Other properties

Compared to the properties of location explored above, protocol, host, hostname and port are used relatively quite less often.

Hence, we don't go in each one separately.

Below, we demonstrate them all together for a given webpage:

// suppose that this script is executed at:
// http://localhost:80/

console.log('Protocol:', location.protocol);
console.log('Host:', location.host);
console.log('Hostname:', location.hostname);
console.log('Port:', location.port);
Protocol: http: Host: localhost:80 Hostname: localhost Port: 80

As can be seen, location.host is composed of location.hostname and location.port with a ':' in between.

Assigning a new URL — location.assign()

Want to redirect the current tab to a new URL using JavaScript? Well, the location.assign() method was provided just for that.

Here's its syntax:

location.assign(url)

It takes in a string argument url providing it with the fully-qualified URL to redirect the current window to, and then does exactly that — redirects the window to that very URL.

An example follows:

<button>Go to codeguage.com</button>
var button = document.querySelector('button');

button.onclick = function() {
   location.assign('https://www.codeguage.com/');
};

Click the button above, and witness your current window being redirected to our home page.

Frankly speaking, regardless of how frequently used this feature is, it is super cool.

Don't you think so?

location.assign() replaced with accessor properties

Nowadays, all the properties of location that we listed above have become accessor properties whereby assignment to a property changes the corresponding component in location.href, and then redirects the window to that new URL.

However, this accessor behavior obviously follows the browser support of accessor properties in JavaScript that aren't supported on IE8 and earlier, and some other browsers.

Hence, if you're working on an application that wants to support many old browsers, you should definitely go with the location.assign() method. It has an amazingly consistent browser support going all the way back to IE6!