Html5 histroy api
Transcript of Html5 histroy api
BY M U KTA D I U R RA H M A N
HTML5 : HISTORY API
URL
• URL is very important!
URL
• It identifies a unique resource• You can link to it directly• You can bookmark it• search engines can index it• you can copy and paste it and email it to
someone else, who can click it and end up seeing the same resource you saw originally
HISTORY API BEFORE HTML5
• window.history.length
HISTORY API BEFORE HTML5
• window.history.length • window.history.back()
HISTORY API BEFORE HTML5
• window.history.length • window.history.back()• window.history.forward()
HISTORY API BEFORE HTML5
• window.history.length • window.history.back()• window.history.forward()• window.history.go(number|url)
PROBLEMS
• Change the URL, even through script, triggers a roundtrip to the remote web server and a full page refresh
PROBLEMS
• Change the URL, even through script, triggers a roundtrip to the remote web server and a full page refresh• There is no way tell a browser to change
the URL but only download half a page
SOLUTION
Hashbang “#!” HTML5 History API
HASHBANG “#!”
Is a technique updates the address bar with a fragment identifier that can then be used by JavaScript to determine which page and state should be displayed
It’s ugly. It’s a hack and have some problems http://twitter.com/#!/KoRn
HTML5 HISTORY API
Pages can add state objects between their entry in the sessionhistory and the next (“forward”) entry. These are then returned to the script when the user (or script) goes back in the history, thus enabling authors to use the navigation” metaphor even in one-page applications.
- WHATWG
BROWSER SUPPORT
• Chrome (5+)• Safari (5.0+)• Firefox (4.0+)• Opera (11.50+)• IE9 and bellow doesn’t support • IE10
IN REAL WORLD
• http://www.facebook.com/note.php?note_id=438532093919• http://blog.gesteves.com/2011/09/22/better-infinit
e-scrolling-with-the-html5-history-api/• http://www.webarnes.ca/2012/04/html5-history-ap
i-and-scrolling/#codesyntax_1
HTML5 HISTORY API
• window.history.length • window.history.back()• window.history.forward()• window.history.go(number|url)
• window.hisotry.pushState(data,title, url)
HTML5 HISTORY API
• data: Some structured data, such as settings or content, assigned to the history item.
HTML5 HISTORY API
• data: Some structured data, such as settings or content, assigned to the history item. • title: The name of the item in the history drop-
down shown by the browser’s back and forward buttons. (Note: this is not currently supported by any major browsers.)
HTML5 HISTORY API
• data: Some structured data, such as settings or content, assigned to the history item. • title: The name of the item in the history drop-
down shown by the browser’s back and forward buttons. (Note: this is not currently supported by any major browsers.) • url (optional): The URL to this state that should be
displayed in the address bar.
HTML5 HISTORY API
• window.history.length • window.history.back()• window.history.forward()• window.history.go(number|url)
• window.hisotry.pushState(data,title, url)• window.history.replaceState(data, title, url)
HTML5 HISTORY API
• window.history.length • window.history.back()• window.history.forward()• window.history.go(number|url)
• window.hisotry.pushState(data,title, url)• window.history.replaceState(data, title, url)
• window.onpopstate = popStateHandler;
EXAMPLE
RESOURCES
• https://github.com/balupton/History.js• http://html5doctor.com/history-api/• https://developer.mozilla.org/en/DOM/Manipulatin
g_the_browser_history• http://badassjs.com/post/840846392/location-has
h-is-dead-long-live-html5-pushstate• http://www.opera.com/docs/specs/presto28/sessio
nhistorynav/