html5 histroy api
TRANSCRIPT
![Page 1: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/1.jpg)
BY M U KTA D I U R RA H M A N
HTML5 : HISTORY API
![Page 2: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/2.jpg)
URL
• URL is very important!
![Page 3: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/3.jpg)
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
![Page 4: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/4.jpg)
HISTORY API BEFORE HTML5
• window.history.length
![Page 5: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/5.jpg)
HISTORY API BEFORE HTML5
• window.history.length • window.history.back()
![Page 6: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/6.jpg)
HISTORY API BEFORE HTML5
• window.history.length • window.history.back()• window.history.forward()
![Page 7: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/7.jpg)
HISTORY API BEFORE HTML5
• window.history.length • window.history.back()• window.history.forward()• window.history.go(number|url)
![Page 8: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/8.jpg)
PROBLEMS
• Change the URL, even through script, triggers a roundtrip to the remote web server and a full page refresh
![Page 9: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/9.jpg)
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
![Page 10: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/10.jpg)
SOLUTION
Hashbang “#!” HTML5 History API
![Page 11: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/11.jpg)
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
![Page 12: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/12.jpg)
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
![Page 13: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/13.jpg)
BROWSER SUPPORT
• Chrome (5+)• Safari (5.0+)• Firefox (4.0+)• Opera (11.50+)• IE9 and bellow doesn’t support • IE10
![Page 14: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/14.jpg)
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
![Page 15: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/15.jpg)
HTML5 HISTORY API
• window.history.length • window.history.back()• window.history.forward()• window.history.go(number|url)
• window.hisotry.pushState(data,title, url)
![Page 16: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/16.jpg)
HTML5 HISTORY API
• data: Some structured data, such as settings or content, assigned to the history item.
![Page 17: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/17.jpg)
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.)
![Page 18: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/18.jpg)
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.
![Page 19: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/19.jpg)
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)
![Page 20: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/20.jpg)
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;
![Page 21: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/21.jpg)
EXAMPLE
![Page 22: Html5 histroy api](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e26a2d8b42a6a4c8b4f7b/html5/thumbnails/22.jpg)
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/