While dealing with the current URL, many times you want to know what is the current URL path, What are the parameters, and what is the hashtag on the URL. The hashtag is pretty important if you are implementing a tab structure using HTML and JQuery. To avoid confusion, let's take an example of a URL: http://javarevisited.blogspot.com/2013/01/top-5-java-programming-books-best-good.html#ixzz2PGmDFlPd, in this example ixzz2PGmDFlPd, is a hashtag. Now, both JavaScript and JQuery provide a convenient way to retrieve the current URL in the form of window.location object. You can use various properties of the window.location JavaScript object like the window.location.href to get complete URL, window.location.pathname to get the current path, and window.location.hash to get a hashtag from current URL.
If you like to use jQuery then you can get a window.location as a JQuery object and retrieve relevant properties using the attr() function.
If you are absolutely new in jQuery and unaware of the power of one of the most popular JavaScript frameworks, Head First jQuery is a good starting point. Being a fan of the head first book, I always approach a new technology with a Head first title, it helped me to learn a lot in a short time, without spending time in trivial examples.
By the way, In this web tutorial, we are going to retrieve the current URL and hashtag using JavaScript and jQuery.
If you like to use jQuery then you can get a window.location as a JQuery object and retrieve relevant properties using the attr() function.
If you are absolutely new in jQuery and unaware of the power of one of the most popular JavaScript frameworks, Head First jQuery is a good starting point. Being a fan of the head first book, I always approach a new technology with a Head first title, it helped me to learn a lot in a short time, without spending time in trivial examples.
By the way, In this web tutorial, we are going to retrieve the current URL and hashtag using JavaScript and jQuery.
How to find the current URL using JavaScript and JQuery.
In JavaScript, just use window.location.href, and in JQuery use code $(location).attr('href'), both will return the current URL. In our other example URL http://localhost:8080/testapp/, here window.location.href will return complete URL, but if you are just interested in the path, then you can use window.location.path, which will return /testapp.
URL : http://localhost:8080/testapp/
window.location.path = /testapp/
window.location.href = http://localhost:8080/testapp/
and if you want to get them using JQuery then use following code
var URL = $(location).attr('href');
var PATH = $(location).attr('pathname')
In the next section, we will learn how to get hashtags using JavaScript and jQuery. And, if you are new to jQuery then you can also see these online jQuery courses to learn more about basic jquery features and functions.
How to get Hashtag from the current URL using JavaScript and JQuery.
Hashtags are String with prefix # (hash) in URL. If you are using tab-based UI and using div to represent different tab, and if you are current URL, when the user is in tab2 is http://localhost:8080/testapp#tab2, then you can retrieve tab2 by using window.location.hash object. This will return just "tab2". You can also wrap some code in JQuery using shortcut $(). Here is the code :
URL : http://localhost:8080/testapp#tab2
window.location.hash = tab2
var hash = $(location).attr('hash');
and here is the HTML page, which combines all these JavaScript and JQuery codes. We have put the JQuery code in $(document).ready(), so it will be executed when the page will be loaded.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JQuery and JavaScript example to get current URL with parameters </title>
</head>
<body>
<div id="choice">
<h2>JQuery Code for getting current URL and Hash </h2>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
//windo.location.pathname will give you path, after http://
var path = window.location.pathname;
alert("window.location.pathname : " + path);
var href = window.location.href;
alert("window.location.href : " + href);
var hash = window.location.hash;
alert("window.location.hash : " + hash);
$(document).ready(function(){
//JQuery code for getting current URL
var URL = $(location).attr('href');
alert("Current URL Using JQuery : " + URL);
});
</script>
</body>
</html>
That's all on How to find the current URL, path, and hash value using JavaScript and jQuery. It's very easy, you just need to know about the window.location Javascript object, but if you are a jQuery fan, and want to avoid cross-browser hassles, then you can also take advantage of jQuery one-liner $(location).attr("href") to get current URL or any attribute from location object.
Other jQuery and JavaScript tutorials you may like to explore
- Top 5 jQuery Books Every Web Developer Should Read? (see here)
- How to get the current URL Parameter using jQuery? (solution)
- How to use multiple jQuery Date picker elements in one HTML page? (answer)
- 10 Examples of jQuery selectors for Web Developers (tutorial)
- How to redirect web pages using jQuery code? (answer)
- 3 Ways to parse HTML using JSoup in Java? (solution)
- How to reload/refresh a page using jQuery? (answer)
- How to prevent double submission of POST data using JavaScript? (solution)
- How to modify multiple elements in one go in jQuery? (example)
- How to check and uncheck checkboxes using jQuery? (tutorial)
Great information, thanks. Is it also possible to get the current tab when using a plugin like jquery.easytabs? I've tried various ways already but the current tab value will only change when I browse to another tab and then refresh the page, not when I only browse to another tab...
ReplyDelete@Anonymous, I think you need to change your CSS, once tab changes. In normal HTML tab solution, using jquery to changing CSS class works fine.
ReplyDelete