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.
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.
You may also like:
