Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Html5 history api

335 vues

Publié le

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

Publié dans : Formation
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

×