Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to monitor the changes in the url (Fragment identifier - the anchor portion of a URL )

I'm making a website that tend to handle all the request in one page (Ajax). so i thought that I could trap every user's click on a link and check IF it's on my website i do something on JavaScript like an ajax request for example, ELSE it would open the link like usual!

doing a watch on window.location did not work! and moreover I don't know if there is anyway to get the url part that is after the # sign. Note: both GMail, and Facebook does that I guess!, they use something like this:
http://mail.google.com/mail/#inbox
http://www.facebook.com/home.php#/inbox/?ref=mb

Kindly Consider: that I love to use jQuery in my projects, so any solution using it is preferred.

Any ideas?

like image 501
Omar Al-Ithawi Avatar asked Nov 01 '09 15:11

Omar Al-Ithawi


People also ask

What is the fragment part of a URL?

The fragment identifier introduced by a hash mark # is the optional last part of a URL for a document. It is typically used to identify a portion of that document. The generic syntax is specified in RFC 3986.

How do URL fragments work?

A fragment is an internal page reference, sometimes called a named anchor. It usually appears at the end of a URL and begins with a hash (#) character followed by an identifier. It refers to a section within a web page. In HTML documents, the browser looks for an anchor tag with a name attribute matching the fragment.

What is a fragment identifier in HTML?

The fragment identifier is a string after URI, after the hash, which identifies something specific as a function of the document. For a user interface Web document such as HTML poage, it typically identifies a part or view. For example in the object http://foo/bar#frag. the string "frag" is the fragment identifier.

Is the fragment identifier sent to the server?

Fragment identifiers are not sent to the server. The hash fragment is used by the browser to link to elements within the same page.


2 Answers

Here is another good read: Restoring Conventional Browser Navigation to AJAX Applications

Excerpt from the article:

Many developers have adopted AJAX as a way to develop rich web applications that are almost as interactive and responsive as desktop applications. AJAX works by dividing the web UI into different segments. A user can perform an operation on one segment and then start working on other segments without waiting for the first operation to finish.

But AJAX has a major disadvantage; it breaks standard browser behavior, such as Back, Forward, and bookmarking support. Rather than forcing users to adapt to AJAX's shortcomings, developers should make their AJAX applications comply with the traditional web interaction style,.......

like image 144
o.k.w Avatar answered Nov 01 '22 17:11

o.k.w


The fragment part of the URL is used to enable navigation history (back and forward buttons) on AJAX-enabled websites. If you want to "trap" clicks on links, since you're using jQuery anyway, you could just do that:

$('a').click(function()
{
   var item = $(this);
   var url = item.attr('href');
   // your logic here
});

If you use fragments (window.location.hash) in constellation with AJAX, note that IE6 submits the fragment part of the url in AJAX requests which can lead to very hard-to-debug bugs, so be aware of that.

like image 41
Tamas Czinege Avatar answered Nov 01 '22 18:11

Tamas Czinege