Saturday, October 20, 2007

[COW] locAction - hash JavaScript location wrapper

One of the problems using JavaScript and Ajax is history managment and location behaviour.
A good solution was found by backbase many months ago, using reserved hash location property to manage correctly interactions and history itself.
This COW should be used to manage hash property as a full compilant location, allowing developers to know pathname, search (query string) and in some cases (JavaScript and Opera) hash itself too.

You can view a demo in this page comparing native location and wrapped one using locAction callback.

Please note that backbase too removed this practice from its site (which problems?) but my locAction proposal is compatible with every kind of JavaScript compatible browser (of course, IE4 and NN4 too).

These are few examples:

// basic example - standard location

href: http://localhost:80/?key=value&other
protocol: http
hostname: localhost
port: 80
pathname: /
search: ?key=value&other
hash:




// basic example - locAction(location)
// using http://localhost:80/?key=value&other#hash

href: http://localhost:80/hash
protocol: http
hostname: localhost
port: 80
pathname: /hash
search:
hash:



// full example - standard location
href: http://localhost:80/mypage.html?key=value&other#ajax/page.html?other=key&value
protocol: http
hostname: localhost
port: 80
pathname: /mypage.html
search: ?key=value&other
hash: #ajax/page.html?other=key&value




// full example - locAction(location)
// using http://localhost:80/mypage.html?key=value&other#ajax/page.html?other=key&value

href: http://localhost:80/ajax/page.html?other=key&value
protocol: http
hostname: localhost
port: 80
pathname: /ajax/page.html
search: ?other=key&value
hash:

As You can see with location You can manage directly a parallel/alternative JavaScript/Ajax dedicated url, accepting GET variables as different paths.
In few words You'll have two different address, one for JavaScript disabled browsers and one for JavaScript enabled browsers.

Both locations, original one and generated using locAction, will have same methods too: replace, assign and reload but locAction() object should be always use these methods (direct assignment is not allowed, however native location direct assignment uses transparently assign method so it's quite tha same).

What else? locAction generated object shoud accept hash string but not with Internet Explorer or Safari (at least 3).

No comments:

Post a Comment