How to get the URL of the webpage using JavaScript

When we are developing a web application, URLs are the ones that we commonly have to deal with. URLs are the paths that are needed to redirect the user to a specific page and hence it is necessary to handle the URLs by some specific methods. JavaScript has its own methods to get the URL of the page which returns a lot of useful information like the hostname, pathname, and the query inside the URL.

Let’s take a look at this in this article.

What is a URL?

URL (Uniform Resources Locator) is a path that allows you to access a particular web page instance. The browser recognizes the path and displays the required webpage against that URL.

Before jumping into getting the URL of a webpage we need to have a basic knowledge of a couple of objects like:

  • window object
  • location object
  • href object

Let’s have a basic understanding of each of these objects.

JavaScript Window Object

JavaScript uses the window.location.href to get the URL of the page. here the window object is a universal or a global object which is basically a browser’s window and this window object holds all the JavaScript objects, functions, and variables as well.

JavaScript Location Object

Location object holds all the information of the current URL of the webpage, this Object can be accessed easily by using the window. location.

JavaScript href Object

The href is a property that can be used to set or return the entire URL of the current webpage we are working on. this property is accessible under the window.location.href

Let’s have a look at the entire object and its applications.

window.location.href explained

In JavaScript, the Location object holds information about the document’s current URL, while the Window interface is used to access it. As a result, you can retrieve the Location object for the current document with Window.location. then utilize the property location.href to retrieve a string containing the whole URL.

The current URL shown in the web browser address bar may be retrieved using a variety of JavaScript techniques. You may retrieve this data by using the Window object’s Location object attribute. The following is a list of some of the characteristics of the location object.

The operations that you can do using JavaScript are listed below.

Examples of URL data retrieved using window.location

Let’s take an example URL ‘’ and perform some operations on it.

Operation Results
window.location.protocol; https:
window.location.port 3737
window.location.pathname get
window.location.query ?post=exp

Browser Implementation

We have discussed above that how we can easily use some of the built-in JavaScript objects to retrieve the URL and the information lying under the URL like the hostname, pathname, the query, etc. Now, we are going to practically test out how the window.location.href property works and how we can use it to get the URL of the webpage quite easily.

JavaScript allows you to get the URL of a webpage using its window.location property. You can simply call the window.location.href property which will return you the complete URL of the webpage including hostname, pathname, and query string.

Let’s test the JavaScript property practically.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>URL Tutorial</title>
    <input type="submit" value="Click me" id="btn">

        var btn = document.getElementById('btn')
        btn.addEventListener('click', (e)=> alert('The url of this page is: ' + window.location.href))

Here in the above code, we have created a button, this button has a JavaScript event attached to it which is triggered whenever a button is clicked by the user. In the JavaScript event, we are displaying the URL of the current webpage in an alert by using the window.location.href, this alert contains the message and the current URL of the webpage.

Browser output:

When we click on the button, an alert pops up which displays the URL of the current webpage:

Here you can see that we have used window.location.href inside the code to get the URL of the webpage and return it into the browser as an alert. So whenever you click on the ‘’Click me’’ button you will see an alert on the screen with the message containing the URL of the current webpage.

Retrieving URL data using JQuery

Until now we have discussed how we can easily get the URL of the webpage by using the JavaScript’s window.location.href property, we can achieve the same functionality with the JQuery as well which is easy to implement and quite reliable as well.

The operations that you can do using JQuery are listed below.

Let’s take an example URL ‘’ and perform some JQuery operations on it.

Operation Results
$(location).attr(‘protocol’); https:
$(location).attr(‘port’); 3737
$(location).attr(‘pathname’); get
$(location).attr(‘search’); ?post=exp
$(location).attr(‘hash’); #query


In JavaScript, window.location.href is the property that you can use to retrieve the URL of the current webpage. You can easily fetch the current page URL and perform whatever operation you want after grabbing the URL. In this article, we have seen a few operations that we can perform on the URL after grabbing it and we also took a look at how we can implement the method inside our JavaScript code to achieve the functionality.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.