Skip to content
Related Articles

Related Articles

Get the current URL using jQuery

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Nov, 2021

In this article, we will learn to get the current URL using jQuery, along with understanding their implementation through the examples.

The current URL in jQuery can be obtained by using the ‘href’ property of the Location object which contains information about the current URL. The ‘href’ property returns a string with the full URL of the current page.

Syntax:

$(location).attr('href')

Example 1: This example illustrates getting the current site detail using jQuery.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Get current URL using jQuery?</title>
</head>
  
<body>
    <h1 style="color: green">GeeksForGeeks</h1>
    <b>Get current URL using jQuery?</b>
    <p>Click on the button below to get the current page URL</p>
  
    <p> The current URL is: <span class="output"></span></p>
    <button id="btn">Get current </button>
      
    </script>
      
    <script>
    $('#btn').click(function() {
        currLoc = $(location).attr('href');
        document.querySelector('.output').textContent = currLoc;
    });
    </script>
</body>
  
</html>

Output:

Getting the current URL using jQuery

Example 2: This example illustrates getting the website details using jQuery.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Get current URL using jQuery?</title>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>Get current URL using jQuery?</b>
    <span class="output"></span>
      
    </script>
    <script>
    alert("host = " 
    + $(location).attr('host') 
    + "\nhostname = " 
    + $(location).attr('hostname') 
    + "\npathname = " 
    + $(location).attr('pathname') 
    + "\nhref = " 
    + $(location).attr('href') 
    + "\nport = " + $(location).attr('port') 
    + "\nprotocol = " 
    + $(location).attr('protocol'));
    </script>
</body>
  
</html>

Output:

Getting the site details using jQuery

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for its philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!