17

I went to some photo sharing site, so when I click the photo, it direct me to a url like

www.example.com/photoshare.php?photoid=1234445

. and when I click the other photo in this page the url become

www.example.com/photoshare.php?photoid=1234445#3338901

and if I click other photos in the same page, the only the number behind # changes. Same as the pretty photo like

www.example.com/photoshare.php?album=holiday#!prettyPhoto[gallery2]/2/

.I assume they used ajax because the whole page seems not loaded, but the url is changed.

5 Answers 5

22

The portion of a URL (including and) following the # is the fragment identifier. It is special from the rest of the URL. The key to remember is "client-side only" (of course, a client could choose to send it to the server ... just not as a fragment identifier):

The fragment identifier functions differently than the rest of the URI: namely, its processing is exclusively client-side with no participation from the server — of course the server typically helps to determine the MIME type, and the MIME type determines the processing of fragments. When an agent (such as a Web browser) requests a resource from a Web server, the agent sends the URI to the server, but does not send the fragment. Instead, the agent waits for the server to send the resource, and then the agent processes the resource according to the document type and fragment value.

This can be used to navigate to "anchor" links, like: http://en.wikipedia.org/wiki/Fragment_identifier#Basics (note how it goes the "Basics" section).

While this used to just go to "anchors" in the past, it is now used to store navigatable state in many JavaScript-powered sites -- gmail makes heavy use of it, for instance. And, as is the case here, there is some "photoshare" JavaScript that also makes use of the fragment identifier for state/navigation.

Thus, as suspected, the JavaScript "captures" the fragment (sometimes called "hash") changing and performs AJAX (or other background task) to update the page. The page itself is not reloaded when the fragment changes because the URL still refers to the same server resource (the part of the URL before the fragment identifier).

Newer browsers support the onhashchange event but monitoring has been supported for a long time by various polling techniques.

Happy coding.

2
  • 2
    @smith onhashchange -- where onhashchange is supported ;-) Otherwise, refer to the source of a "cross browser" implementation, such as jQuery hashchange plugin
    – user166390
    Commented Oct 26, 2011 at 23:50
  • 1
    @smith # is the first character of the fragment identifier. The # and everything after is part of the fragment identifier. Google uses a crawling method that utilizes certain fragments that start with #! -- this is their convention/approach (and everyone who wants a well/correctly-indexed "interactive" site is apt to follow it, google being "the big dog".) See the link in Chuck's answer.
    – user166390
    Commented Oct 27, 2011 at 1:01
7

It's called the fragment identifier. It identifies a "part" of the page. If there is an element with a name or id attribute equal to the fragment text, it will cause the page to scroll to that element. They're also used by rich JavaScript apps to refer to different parts of the app even though all the functionality is located on a single HTML page.

Lately, you'll often see fragments that start with "#!". Although these are still technically just fragments that start with the ! character, that format was specified by Google to help make these AJAXy pseudo-pages crawlable.

1
  • 1
    so #! is the same as and #? can you show me how javascript work with it, like they did for the photo? thanks!
    – smith
    Commented Oct 26, 2011 at 23:42
3

The '#' symbol in the context of a url (and other things) is called a hash, what comes after the hash is called a fragment. Using JavaScript you can access the fragment and use its contents.

For example most browsers implement a onhashchange event, which fires when the hash changes. Using JavaScript you can also access the hash from location.hash. For example, with a url like http://something.com#somethingelse

var frag = location.hash.substr(1);
console.log(frag);

This would print 'somethingelse' to the console. If we didn't use substr to remove the first character, it frag would be: '#somethingelse'.

Also, when you navigate to a URL with a hashtag, the browser will try and scroll down to an element which has an id corresponding to the fragment.

http://en.wikipedia.org/wiki/Fragment_identifier

2
  • 2
    What you call a "hashtag" is properly called a "fragment". Commented Oct 26, 2011 at 23:24
  • 1
    so how to use javascript to access tp the fragement, could you show me an example,
    – smith
    Commented Oct 26, 2011 at 23:43
2

It is the name attribute of an anchor URL: http://www.w3schools.com/HTML/html_links.asp

It is used to make a bookmark within an HTML page (and not to be confused with bookmarks in toolbars, etc.).

In your example, if you bookmarked the page with the # symbol in the URL, when you visit that bookmark again it will display the last image that you viewed, most likely an image that has the id of 3338901.

1

hey i used sumthing like this .... simple but useful

       location.href = data.url.replace(/%2523/, '%23');

where data.url is my original url . It substitutes the # in my url

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.