Are you looking to retrieve the current URL of a web page in JavaScript? If so, you’ve come to the right place. In this comprehensive guide, we’ll discuss the various methods available to get the current URL of a web page in JavaScript.

What is a URL and Why is it Important?

A URL, or Uniform Resource Locator, is a web address used to locate a specific web page or resource on the internet. URLs are the backbone of the internet, allowing users to navigate from one web page to another.

The current URL of a web page is an essential piece of information frequently used in web development. For example, you may want to retrieve the current URL to redirect the user to another page, extract data from the URL, or use it in an AJAX request.

Method 1: window.location.href

The simplest and most commonly used method to get the current URL of a web page is by using the window.location.href property. This property returns the complete URL of the current web page, including the protocol (e.g. http or https), domain name, and any parameters or query strings.

Here’s an example of how to use the window.location.href property:

				
					console.log(window.location.href);

This will output the complete URL of the current web page to the console.

Method 2: document.URL

Another commonly used method to get a web page’s current URL is the document.URL property. This property returns the complete URL of the current web page, just like window.location.href.

Here’s an example of how to use the document.URL property:

				
					console.log(document.URL);

This will also output the complete URL of the current web page to the console.

Method 3: window.location

The window.location object can also be used to retrieve the current URL of a web page. This object contains several properties that provide information about the current URL, including the href property (which returns the complete URL), the protocol property (which returns the protocol used by the URL), the host property (which returns the hostname and port of the URL), and others.

Here’s an example of how to use the window.location object to retrieve the complete URL of the current web page:

				
					console.log(window.location.href);

This will output the complete URL of the current web page to the console.

Method 4: Using the Location Object

In addition to the window. object, the Location object can also be used to retrieve the current URL of a web page. This object is a synonym for the window.location object and can be used in the same way.

Here’s an example of how to use the Location object to retrieve the complete URL of the current web page:

				
					console.log(location.href);

This will output the complete URL of the current web page to the console.


Thanks for reading. Happy coding!