What are the standard techniques/libraries for back button/linking support in heavily Ajax pages?
I am just coming back to web development after a while away and am now building heavily Ajax-ified pages to the p开发者_运维技巧oint of doing loading/hiding of whole sections of the site with javascript and am horrified how this tends to lead to sites that are incompatible with bookmarks and the browser's back-button. In the absence of a unified back-button API I'm sure various techniques, do's and don'ts and probably javascript libraries exist to deal with the issue.
What are the various techniques available? I know of one involving a timer and hashlinks? What are your recommendations?
and who if any are the heavy-hitter libraries to be looking at,
just look for the term "hash-bang" ...
you'll find sth like:
- backbone-js
- history-js (for jQuery)
- jQuery BBQ
and, just for info, there is PushState API (which is supported by modern browsers only!) (gitHub is using this for navigating through a source-tree)
History.js which Andreas mentioned provides the same interface as the HTML5 History API which allows you to modify the URL of a page directly. For older browsers it also includes an optional fallback to the HML4 HashChange functionality if you don't want them to just experience refreshes.
USing the HTML5 History API allows you to modify the url directly, so you don't have any of the SEO or js-disabled problems as you would when using hashes. You can read more about the issue of HTML5 History API VS. Hashes VS. Hashbang right here
History.js also supports all the javascript frameworks, and in an upcoming release will support even the use of no framework. There is also this snippet of code you can use, which will ajaxify most websites automatically without any extra or custom code.
The reason you'll want to use History.js besides the optional HTML4 browser support is that natively the HTML5 History API is unusable. Every browser implementation handles it very very differently, and in some cases just does not work at all. You can find a listing of all the known cross-browser quirks with the native implementations here.
There is also Modernizr's HTML5 Cross Browser Polyfills Wiki Page which is a great resource for discovering which libaries are out there.
Check out backbone.js, which provides a lightweight MVC model in the browser utilizing URL fragments to represent different variations of a page.
From their doc...
Web applications often choose to change their URL fragment (#fragment) in order to provide shareable, bookmarkable URLs for an Ajax-heavy application. Backbone.Router provides methods for routing client-side URL fragments, and connecting them to actions and events.
精彩评论