Hurry! Try our new Interactive Courses for FREE. 🥳   🚀
Written By:
HIMANI56
6 minute read
JavascriptHowToURLWeb Development

How to get Current URL in Javascript?

Posted in Programming   JULY 23, 2021

In JavaScript, we can use the location object to get the current webpage URL.

The location object contains information about the current URL and it is a property of the JS window object which represents the browser window.

To get the entire URL, use the following:

console.log(window.location.href);


https://www.studytonight.com/post/how-to-get-current-url-in-javascript

The property named window.location.href is used to get the entire URL of the current page that includes all the components of the URL.

What is a URL?

URL stands for Uniform Resource Locator, which is the address that you use to access any website, webpage, or any resource online.

You can read more about URLs here: What is a URL?

Given below is the basic structure of a URL:

<protocol>//<hostname>:<port>/<pathname><search><hash>

Let us take a look at the components of the URL:

  • protocol: This is the internet access protocols, like, HTTP, HTTPS, FTP, etc.

  • hostname: It indicates the host that owns the resources. It's the domain name, like studytonight.com, or studytonight.in, etc.

  • port: The port number is the network port address to access the host server. The default HTTP port is 80 and for SSL it's 443, etc.

  • pathname: It indicates the path of the specific resource on the host server that the web client wants to access. For example, if you use the apache web server, then the /htdocs directory is the root directory and everything inside can be accessed using their path.

  • query: This represents the query parameter like the GET parameter added after the URL.

  • hash: It is used to represent the anchor portion of the URL and it generally includes the hash sign (#).

Hence, using the location object, the entire URL or any of its specific components can be easily accessed.

The window object is a global object and therefore the location can be used anytime or anywhere in your JavaScript code.

Using the Location property

When we use the location object, it will return the list of properties that have different useful methods and values that can be used.

console.log(location);


Location {ancestorOrigins: DOMStringList, href: "https://www.studytonight.com/code/playground/web/?id=1qKE2P", origin: "https://www.studytonight.com", protocol: "https:", host: "www.studytonight.com", …}

In the above code example and output, you can see that the Location object containing all the information related to the URLs.

The window.location is a read-only location object.

  • It returns the location object with the information about the current location of the document.
  • The location.href is used to get the complete URL of the current window.

  • If you want to get the hostname of the current page then you can use location.hostname

Now let us take a look at the example in order to gain a complete understanding.

Get Complete URL of Webpage

Given below is the example of getting the URL of the current page:

<!doctype html>
<html>
    <head>
        <title>Get URL of Webpage</title>
    </head>
	<body>
		<script>
		 document.write("The complete URL is: ", window.location.href);
		</script>
	</body>
</html>


https://www.studytonight.com/post/how-to-get-current-url-in-javascript

Now let's see how we can get different parts of the URL.

Get Parts of URL of Webpage

Let us take a look at another example of how we can obtain the hostname, pathname, and port, etc. of the current URL using the location object:

When you run the above code, you may get a different pathname, because the above code is running on that page, and it is embedded on the current page to show the live example.

Browser Support:

The property window.location is available on almost every modern and old browser, because the location is property of the window object, which is part of core JavaScript.

Conclusion

Now we know how to get the current URL or its parts of any webpage using the window.location property.


IF YOU LIKE IT, THEN SHARE IT

RELATED POSTS