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 ‘ https://exp.com:3737/get?post=exp#query’ and perform some operations on it.
| Operation | Results |
|---|---|
| window.location.href | https://exp.com:3737/get?post=exp#query |
| window.location.protocol; | https: |
| window.location.host | example.com:3737 |
| window.location.hostname | exp.com |
| 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.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>URL Tutorial</title>
</head>
<body>
<input type="submit" value="Click me" id="btn">
<script>
var btn = document.getElementById('btn')
btn.addEventListener('click', (e)=> alert('The url of this page is: ' + window.location.href))
</script>
</body>
</html>
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 ‘ https://exp.com:3737/get?post=exp#query’ and perform some JQuery operations on it.
| Operation | Results |
|---|---|
| $(location).attr(‘href’); | https://exp.com:3737/get?post=exp#query |
| $(location).attr(‘protocol’); | https: |
| $(location).attr(‘host’); | example.com:3737 |
| $(location).attr(‘hostname’); | exp.com |
| $(location).attr(‘port’); | 3737 |
| $(location).attr(‘pathname’); | get |
| $(location).attr(‘search’); | ?post=exp |
| $(location).attr(‘hash’); | #query |
| $(location).attr(‘origin’); |
Conclusion:
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.
