How to Get the Current URL With JavaScript

1. Get the Current URL With window.location.href in JavaScript
2. Get the Current URL With Document.location.href in JavaScript
3. Get the Current URL With Document.URL in JavaScript
4. Get the Current URL With Document.baseURI in JavaScript

This tutorial will teach you four different methods that will get you the current URL. Also, we’ll discuss a disadvantage of the document-* based methods.

Get the Current URL With window.location.href in JavaScript

The window is a global object in JavaScript that contains many properties about the web page. These properties are the location object that contains properties like href.

The href in the location object is a string representation of the current URL of the web page. In our next code block, we saved the value of window.location.href in a variable and logged in to the console.

let currentURL = window.location.href;
console.log(currentURL);

Output on Google:

https://www.google.com/

Do the following if you’d rather get the current URL via the browser Developer Tools.

1. Open the web page.
2. Launch the Developer Tools, and switch to the Console tab.
3. Type window.location.href and hit the Enter key on your keyboard.

The image below shows how we use window.location.href on Google search.

Get the Current URL With Document.location.href in JavaScript

The document object contains information about the current document. Furthermore, it contains another object called location.

The location object contains the href string that is the URL of the current page.

let currentURL = documet.location.href;
console.log(currentURL);

Output on DelftStack:

https://www.delftstack.com

In your web browser Developer Tools, you can get the current URL with document.location.href.

Get the Current URL With Document.URL in JavaScript

The document object contains the URL property that is the URL of the current page. However, if an element on the current web page has a name attribute whose value is URL, it will shadow the real URL.

Consequently, document.URL will return the element and not the URL of the web page. We’ll show how this works, but first, let’s see how to get the URL with document.URL.

let currentURL = document.URL;
console.log(currentURL);

Output on DuckDuckGo:

https://duckduckgo.com

Let’s observe the effect of an element having a name attribute set to document.URL. First, navigate to Google search engine and once Google loads, launch the Developer Tools with Ctrl + Shift + I and do the following.

1. Switch to the Console tab.
2. Type document.URL and press the Enter key on your keyboard. You should get the URL of Google search.
3. Use Inspect element on the search input and locate the form element.
4. Add name="URL" to the form element and press the Enter key on your keyboard.
5. Retype document.URL into the console and press the Enter key on your keyboard.

The document.URL returns the form and not the URL of Google. The image below shows the difference before and after the adding of name="URL" to Google’s search form.

Get the Current URL With Document.baseURI in JavaScript

The baseURI is a string that is part of the document object, and it returns the current URL of the web page. Like, document.URL, its value can be shadowed by an element with its name attribute set to baseURI.

let currentURL = document.baseURI;
console.log(currentURL);

Output on Unsplash:

https://unsplash.com

You can shadow the value of document.baseURI like we did with document.URL.