Alternatively, you can access the current URL via document.URL property. However, it has some shortcomings that I’ll explain in a bit.
Let’s take a closer look at the window.location object. It has useful properties other than the href that returns the URL.
As you learned in the introduction already, window.location object is useful because you can retrieve the current page URL with it.
By the way, it’s possible to change the window.location object properties, such as the URL.
The window.location object has other useful properties too. Before accessing the properties, let’s take a quick look at the URL parts.
Let’s quickly go through the basic URL structure to distinguish the parts in it.
- Protocol. The protocol is the “first part” of a URL. It specifies which protocol to use to access the resource on the internet. Protocols include HTTP, HTTPS, or FTP.
- Subdomain. A domain can be split into logical sections, called subdomains. The most common example is www, which means the domain is (automatically) part of the world wide web subdomain. Better examples of subdomains are store, blog, or app. For example, app.example.com, or blog.example.com.
- Domain Name. The domain name is the actual address of your website. It is the host that owns the resources of your site. For instance, example.com is a domain name.
- Port. The port is an optional part of a URL because it’s set automatically. It is a number that determines the “gate” via which you want to retrieve the resources.
- File Path. The file path is like a file path on your computer. On a website, the web pages are files on a server. To access a particular web page, you need to specify the path to it on a server. For example, https://www.example.com/calculator.html.
- Query Parameters. Query parameters can be inserted into a URL to perform an action like a search on the server.
- Fragment. Fragment, hash, or anchor is used to specify a part of a page to be accessed. For example, example.com/blog/what-is-url#chapter1
Now you understand what makes up a URL.
If you are unfamiliar with URLs, make sure to read a comprehensive guide, What Is a URL?
Access URL Parts with window.location Properties
- href. The entire URL of your current page.
- protocol. The protocol that the URL uses.
- host. The hostname and the port of a URL.
- hostname. The hostname of a URL.
- port. The port of the URL.
- pathname. The file path in the URL.
- search. The query parameters of the URL.
- hash. The fragment or anchor of the URL.
- origin. A Combination of the protocol and host of the URL.
Here are examples of accessing these properties when the URL is https://www.codingem.com/best-pixel-art-software/#photoshop.
To make it easier to see, here is a zoomed-in image of accessing the URL properties.
Before you go, let’s talk about a commonly seen alternative, document.URL.
Get the Current URL with document.URL
Another popular way to get the current URL of a page is by accessing the URL property of the document.
Unlike window.location.href, the document.URL gives you a read-only string that represents the current page’s URL. So if you don’t want to make changes to the URL string, then it might make more sense to use document.URL over window.location.href.
But the problem with document.URL approach is it has some bugs in Firefox.
For example, in Firefox 12, the document.URL doesn’t change when adding an anchor to the end of a URL.
So if you want to be 100% sure to get the URL and all of its parts, use the window.location.href.
Thanks for reading!
To put it short, use the window.location.href property to access the URL of the page. Keep in mind you can directly modify this property as well.
To get a read-only URL string, you might consider using the document.URL. But remember it has some bugs with Firefox.