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.
Location object holds all the information of the current URL of the webpage, this Object can be accessed easily by using the window. location.
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.
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.
<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))
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
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.