Html5 History-API

572 views

Published on

The HTML5 history API is a standardized way to manipulate the browser history via script.The new parts in HTML5 include a way to add entries to the browser history, to visibly change the URL in the browser location bar (without triggering a page refresh), and an event that fires when those entries are removed from the stack by the user pressing the browser’s back button. This session would help learn more about HTML5 History API.

Published in: Software, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
572
On SlideShare
0
From Embeds
0
Number of Embeds
64
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html5 History-API

  1. 1. HTML5 History APIHTML5 History API
  2. 2. About Me Connect Me Facebook : https://www.facebook.com/majuansari LinkedIn: http://in.linkedin.com/pub/maju-ansari/32/1a0/359/ Twitter: https://twitter.com/majuansari Google+ : https://plus.google.com/112221894604861593451 Contact Me Email : majua@mindfiresolutions.com Skype: mfsi_majua OCA-1z0-870 - MySQL 5 - Certified Programmer Skills : php, jQuery, Ajax,nodeJs,phantomJs,raphaelJs,Dr upal, Symphony,Codeigniter
  3. 3. Web StateWeb State Stateful and statelessStateful and stateless Web Pages/Applications are Stateful?Web Pages/Applications are Stateful? The back & forward buttons in the browserThe back & forward buttons in the browser traverse statetraverse state The URL is a link to the stateThe URL is a link to the state Search engine crawlers take a snapshot ofSearch engine crawlers take a snapshot of each possible state, and indexes themeach possible state, and indexes them
  4. 4. AJAXAJAX Breaks ThisBreaks This
  5. 5. How AJAX breaks stateHow AJAX breaks state The back & forward buttons no longer behave asThe back & forward buttons no longer behave as expectedexpected Links no longer work correctlyLinks no longer work correctly Search engines can no longer crawlSearch engines can no longer crawl
  6. 6. Solution?Solution?
  7. 7. Hack the # AnchorHack the # Anchor Lots of ugly hacks, especially in IE whereLots of ugly hacks, especially in IE where we need to use an iFrame.we need to use an iFrame.
  8. 8. Problems?!!Problems?!!
  9. 9.  There are now two urls for the same content http://mywebsite.com/page1 and http://mywebsite.com/#!/page1  URLs get polluted if we did not start on the home page http://mywebsite.com/page1#!/page2  JS-disabled user will not get the right page.  Performance and experience issues when a hashed url is loaded.
  10. 10. BetterBetter Solution?Solution?
  11. 11. HTML5 History APIHTML5 History API
  12. 12. HTML5 History APIHTML5 History API 2 new methods:2 new methods: pushStatepushState replaceStatereplaceState 1 new event on the window object:1 new event on the window object: onpopstateonpopstate
  13. 13. pushStatepushState // This object is passed to the onpopstate event when it is fired. You // can fill this object with what ever you like. var stateObject = { title: 'This Awesome Post', createdAt: '2010-10-10', author: 'MF' }; // At the moment, most browsers are ignoring this property, so just fill it with // the title of the new page. According to Firefox, they _may_ use it in The // future. var title = 'This Awesome Post'; // The full URL of the new page. var url = '/posts/this-awesome-post'; history.pushState(stateObject, title, url);
  14. 14. replaceStatereplaceState Same API asSame API as pushStatepushState, but doesn’t add, but doesn’t add anything to the history stack.anything to the history stack.
  15. 15. onpopstateonpopstate $(window).bind('popstate', function(event) { alert('State Changed!'); })
  16. 16. Life CycleLife Cycle
  17. 17. MoreMore Problems?!!Problems?!!
  18. 18. Browser SupportBrowser Support
  19. 19. history.jshistory.js HTML5 History API is supported.HTML5 History API is supported. Reverts back to the # Anchor hack.Reverts back to the # Anchor hack. https://github.com/browserstate/history.jshttps://github.com/browserstate/history.js
  20. 20. DemoDemo
  21. 21. Thats It!Thats It! QUESTIONS ?QUESTIONS ?

×