Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5 history api

337 views

Published on

為什麼會有HTML5 histroy API? ajax帶來那些缺點? 早期如何解決? 現在的做法?

Published in: Education
  • Be the first to comment

  • Be the first to like this

Html5 history api

  1. 1. HTML5 history API
  2. 2. ajax(Asynchronous JavaScript and XML) 潮潮 Der 過去 現在 一切看似完美,但其中造成一些問題
  3. 3. ajax 帶來哪些問題? SEO 破壞瀏覽紀錄 資料驗證 {JS}HI 123 HTML5 history API,因此誕生
  4. 4. 過去作法 瀏覽器記錄歷史紀錄條件? URL 改變 (iframe 或 當前頁面) => window.history https://www.google.com.tw/webhp?sourceid=chrome-instant&ie=UTF-8#q=javascript%20icon 協定 host pathname search hash 解析URL window.location.href
  5. 5. URL HASH index.html => apple => banana 使用者瀏覽 HASH "" #page1 #page2 js onload() location.hash="#page1" location.hash="#page2" 上一頁 window.onhashchange=function() { switch(window.location.hash) { case "#page1": page1(); break; case "#page2": page2(); break; } Refresh? 題外話:SEO?
  6. 6. HTML5 history API window.history pushState(state, title, url) 加入歷史紀錄 replaceState(state, title, url) 修改當前紀錄 window.onpopstate=function(event){} 更動歷史紀錄時觸發 state state state ………………………….
  7. 7. HTML5 history API index.html => apple => banana 使用者瀏覽 URL "" domain/apple js onload() pushstate({page:"page1"}, "", "/apple")pushstate({page:"page1"}, "", "/apple") domain/apple 上一頁 window.onpopstate=function(event){ switch(event.state.page) { case "page1": page1(); break; case "page2": page2(); break; } } Refresh? xmlhttp.setRequestHeader("pjax", true); pushstate+ajax=PJAX
  8. 8. Reference http://sls.weco.net/blog/ie955126/25-dec-2008/11896 (ajax 優缺) http://rettamkrad.blogspot.tw/2013/04/ajaxandhistoryapi.html (ajax 瀏覽紀錄) https://developers.google.com/webmasters/ajax-crawling/docs/getting-started (google ajax crawable) https://developer.mozilla.org/zh- TW/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Manipulating_the_browser_histo ry HTML5 history API
  9. 9. Q&A

×