Using multiple fragment identifiers in a URL

Question

I was wondering whether I can use multiple fragment identifiers in a url, sort of like this: http://example.com/videos/index.html#videos#video_2

I'm using jQuery Tools tabbing system on my index.html page, with the history plugin. This page's "Videos" tab has a flash video player and list of videos on it. Clicking on a video thumbnail loads the file into the player.

I would like a visitor to be able to bookmark not just the #videos tab, but also a specific video.

Am I going about it totally wrong to think having two fragment identifiers in the URL would be the way to achieve this?

Answer 1

I'm pretty sure that a double anchor link is impossible!

You could put a pointer to the correct tab and video in the query string of the url (e.g. mysite.com/videos/index.html?tab=video&video=2) and then parse this in JavaScript. This can then be bookmarked.

However couldn't you stick with the original model (using a single # anchor link) and then simply use JavaScript to find which tab that tag is in, and therefore show the correct tab?

Answer 2

No, you can't use multiple hashtags in an URL. The identifier after the hash characters leads to a bookmark anchor on the page, and you can only go to one anchor, you can't go to two anchors at the same time.

If you are bookmarking a video, the natural thing would be that the URL leads to the video, and if you need to show a specific tab in the page you should have code that recognises the video anchor and shows the correct tab.

Answer 3

The regular expression to parse URL fragment after # is like this:

(#(.*))?

It means that every character could be passed. So, choose one of these two approaches:

1. convert all hashes after the first one to '%23'. also you need to do this ( converting to %HEX eq.) for all non acceptable or reserved characters. ex: http://domain.com/app#first%23second
2. Use multiple hashes and deal it in app! the first is easy but may not be implementable in your specific app.

see this doc to ensure about valid characters after #.

Answer 4

A simple way would be to use a link like this:

index.html#video_2

Then parse the hash to get the ID of the video:

if (location.hash.indexOf("#video_" === 0)) {
    var index = location.hash.indexOf('_')
    var id = location.hash.substring(index + 1)
    // use jQuery to click the 'videos' tab
    // load the video with id
}

You could also listen to the "hashchange" event, just in case someone copy/pastes a URL for a specific video while already on your web page (e.g. with a different hash):

window.addEventListener("hashchange",function(event){
    // check hash for video with ID
});