Thursday, June 6, 2013

While dealing with current URL, many time you want to know what is the
current URL path, What are the parameters, and what is the hash tag on URL.
Hash tag is pretty important, if you are implementing tab structure using HTML
and JQuery. To avoid confusion, let's take an example of URL: http://javarevisited.blogspot.com/2013/01/top-5-java-programming-books-best-good.html#ixzz2PGmDFlPd
, in this example ixzz2PGmDFlPd is hash tag. Now, both JavaScript
and JQuery provides convenient way to retrieve current URL in form of window.location object.
You can use various properties of window.location JavaScript
object e.g. window.location.href to get complete URL, window.location.pathname to get
current path, and window.location.hash to get hash tag from
current URL. If you like to use JQuery then you can get window.location as JQuery
object and retrieve relevant properties using attr() function.
If you are absolutely new in JQuery, and unaware of power of one of the most
popular JavaScript framework, Head First JQuery is a good
starting point. Being a fan of head first book, I always approach a new technology
by an Head first title, it helped to learn a lot in short time, without
spending time in trivial examples. By the way, In this web tutorial, we are
going to retrieve current URL and hash tag using JavaScript and JQuery.

How to find current URL using JavaScript and
JQuery.

In JavaScript, just use window.location.href, and in JQuery use code $(location).attr('href'), both will
return current URL. In our another example url http://localhost:8080/testapp/,
here window.location.href will return complete URL,
but if you are just interested in path, than 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

varURL= $(location).attr('href');

var PATH = $(location).attr('pathname')

In next section, we will learn how to get hash tag using JavaScript and
JQuery.

How to get Hashtag from current URL using
JavaScript and JQuery.

Hash tags 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 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 same 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
code. We have put the JQuery code in $(document).ready(), so it will
be executed when 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>

<scriptsrc="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 current URL, path and hash value using
JavaScript and JQuery. It's very easy, you just need to know about window.location Javascript
object, but if you are 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.

Further Reading on JQuery

If you are interested in learning
JQuery and knowing more about power of this amzing JavaScript library, you can
checkout following books. Head First JQuery is my favorite but other two are
also good companion book.

2 comments
:

Anonymous
said...

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...