One of the common usability problems surrounding dynamically altered JavaScript pages is that there is no standard way of bookmarking an instance of a page. For example, if a user pages through a list, do they have a way of sending a URL to friend that will take them directly to page 3 of that list? There are two approaches to solving this problem: anchor links and page refreshes.
The anchor link approach works like a normal link, but since it is an anchor the state of the page is preserved, and the URL bar is updated. So, if we have this URL when the page loads:
http://list.com/
The user might then click a link on the page that fires off an Ajax request. The page doesn’t reload, but the URL is changed to:
http://list.com/#page2
I’m not a huge fan of this approach mainly because it is a hack. It does work, but it doesn’t feel like the proper solution. Confusion can also occur when actual anchor links are needed, or when there are multiple paramteres to set.
The second approach, as seen in Google Maps, is to have a link on the page that says “Bookmark this page.” When the user clicks the link, the page refreshes, and the URL becomes bookmarkable. I wanted to go ahead and share how we handle this approach. First, the URL is constructed so that anything after the word bookmark is treated as a parameter.
http://list.com/bookmark/page/2/
Given that format, the following function will parse the URL into an associative array.
function parseUrl() {
ret = new Array();
url = window.location.toString();
url = url.split('/bookmark/');
if(url.length == 2) {
params = url[1].split('/');
for(var i = 0; i < params.length; i+=2) {
if(params[i+1]) {
ret[params[i]] = params[i+1];
}
}
}
return ret;
}
parseUrl() just loops through the name value pairs in the URL, and places them in an array. If there is a name without a value, it will not be included, and if the word ‘bookmark’ is not found, the array will be empty. Given the array, we can now perform actions on load:
function init() {
params = parseUrl();
if(params['page']) jumpToPage(params['page]);
}
What is nice about this approach is that the URL can be easily guessed, and should someone guess wrong, the invalid parameters can just be ignored.
Just a correction. On the 7th paragraph, it’s
parseUrl(), notpasreUrl().yes, thanks for this comment :) anf of course, article too…
Thanks for the heads up. Should be fixed now.
So instead of allowing the user to bookmark the page, you’re saying they should first click a link that then allows them to bookmark it? I’m not quite seeing how that’s acceptable; you’re still breaking that functionality.
You might also want to keep scope in mind in JavaScript. The variables declared in your functions are all global. Prefixing variable declarations with the
varkeyword will make them local.Hey Brodie, I think it’s more like a permalink feature in blogs. What it provides is a bookmarkable link. So they technically don’t have to click the link, then bookmark it—they could just bookmark the link. Obviously, some of the issues is in conveying that…but I think it seems to work fine in Google Maps and on blogs, so it isn’t a completely new concept.
This might solve the bookmark problem although this has its own issue… But the common reason why “anchor links” are used is to enable “back button” functionality. That is very important from an usability perspective. Is there a cleaner solution for that, other than the “anchor link” technique.
Nice. Submitted to tweako
What could be used, if you program in ASP.NET, is to hook up an HttpHandler and manage server side this Url. This could allow you to use this technology which is called Permalink. For different types of Permalink that is used, take a look at the article on Wikipedia
Try this: http://walk2web.com as bookmarker and surfer.
I never understood why all that hype about “permalinks”… Look, a link is permanent, unless you don’t work with them properly. Therefore, we don’t need “permalinks” but to use links appropately; otherwise we are just duplicating functionality and confusing people (why should the link to a page be different to its permalink!?!”)
I disagree - the first method allows people to bookmark pages the way they’re used to doing it. - It may be a hack — but it works… (Its also simpler)
Hi! I think .htaccess is better