Signup/Sign In

How to get Current URL in Javascript?

Posted in Programming   LAST UPDATED: SEPTEMBER 28, 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.

    You may also like:

    About the author:
    Aspiring Software developer working as a content writer. I like computer related subjects like Computer Networks, Operating system, CAO, Database, and I am also learning Python.
    Tags:JavascriptHowToURLWeb Development
    IF YOU LIKE IT, THEN SHARE IT
     

    RELATED POSTS