Get the current URL using jQuery
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.
.png)
