Ajax single page History

2016-01-20

Ajax History

最近研究 Ajax History 這個部分

以下收錄幾個參考最多的文章

http://rettamkrad.blogspot.tw/2013/04/ajaxandhistoryapi.html

http://blog.darkthread.net/post-2011-09-23-ajax-history-in-html5.aspx

https://developer.mozilla.org/zh-TW/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Manipulating_the_browser_history

以及開發出 History.js 這一套跨瀏覽器工具的作者 Git

https://github.com/browserstate/history.js/

主要的使用方式是

history.pushState(object, title, url);

範例如下，節錄自第三個網址:

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

那麼，要從 push 進去的物件取出時

history.state.foo // foo: push 的 propertyName)

利用 Html 5 的作法大概是這樣

但是若瀏覽器還需要支援 IE 9 之類的時候，可以使用 History.js

但實際上... 會建議採用 URL 跳轉的方式，可能較為便利些。在程式上也不用區分支援性

if(window.history.pushState || window.history.state){
  history.pushState(obj,title,url);
}else{
  //non Html5 do else 
}

chinggo