Those Who Control The Past Control The Future: The HTML5 History API Sean Adkinson (@seanadkinson)...
-
Upload
raymond-carroll -
Category
Documents
-
view
214 -
download
1
Transcript of Those Who Control The Past Control The Future: The HTML5 History API Sean Adkinson (@seanadkinson)...
Those Who Control The Past Control The Future:The HTML5 History API
Sean Adkinson (@seanadkinson)
Jama Software
2012 HTML5 Developer Conference
What is it?
The HTML5 History API gives JavaScript the ability to control
the browser’s URL
…without reloading the page
Why History API now?
AJAX and single-page applications
New resources should have new URLs
The History API gives you the ability to use AJAX, and maintain proper URLs
“#!” Solution
Uses browser in-page link functionality
Problems with this solutionOnly accessible to the clientDoesn’t work without JavaScriptCan’t use browser in-page linksIt’s a hack
History API Spec
Two additional window.history methods
One additional window event
Push Statewindow.history.pushState(data, title,
path);
Replace Statewindow.history.replaceState(data,
title, path);
Pop Statewindow.onpopstate =
function(event);
demo
Single-Page Strategy
URL State, one-to-one
When state is changed, push new corresponding URL
On pop state (and initial page load), display based on URL State
If starting a new project, just use a framework like Backbone
demo
Multi-Page Strategy
Intercept link clicks
Retrieve and display contentBack-end returns only HTML
Push/replace state
Github is a great exampledemo
Browser SupportInternet Explorer None
Firefox 4.0+
Safari 5.0+
Chrome 8.0+
Opera 11.50+
iPhone 4.2.1+
Android None
History.js
Abstraction layerHistory.pushState(data, title, url);History.replaceState(data, title, url);window.onstatechange
URLs can be pasted between IE Firefox
Adapters for jQuery, Zepto, MooTools, more
http://bit.ly/historyjs
References
http://diveintohtml5.info/history.html
http://html5doctor.com/history-api/
https://github.com/balupton/History.js/
Sean Adkinson
Jama Software@seanadkinson
Questions?