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/