When dealing with URLs in JavaScript, you will come across various syntax like location, window.location, or location.href, etc. Each piece of syntax has it use, and you will become a smarter developer by knowing the difference between them. In this article, I will show you how to correctly get the full URL with JavaScript.
If you go out and search for how to get the URL, you will come across a myriad of snippets and tips that may over-complicate this issue. In fact, you only need to know one word: location.
Solid Tip: Location is an object that holds all the information about the URL that you need.
One property in particular will hold the entire URL, which is a common value that people look for. This property is href. To correctly get the full URL is JavaScript, simply reference location.href. You can see a table of all available properties below. They are accessed as location.desiredproperty in your script.
The sample URL below is http://solidlystated.com/hardware/page/2/?cid=1
Properties Available in the Location Object
| Property | Type |
|---|---|
| hash | “” |
| host | “solidlystated.com” |
| hostname | “solidlystated.com” |
| href | “http://solidlystated.com/hardware/page/2/?cid=1” |
| pathname | “/hardware/page/2/” |
| port | “” |
| protocol | “http:” |
| search | “?cid=1” |
| assign | assign() |
| reload() | reload() |
| replace() | replace() |
Solid Tip: While location.href holds the current URL for reference, you can also set it to a new value and the page will immediately load the new URL.
What About ‘Window’ ?
What’s the difference between location and window.location? Nothing.
What’s the difference between location.href and window.location.href? Nothing again.
The location object references the top window by default, so it doesn’t matter.
