html5的歷史API

不得不佩服下谷歌Chrome團隊，利用HTML5和CSS3實現了一本相當漂亮的線上電子書：《關於瀏覽器和互聯網20件事》。

訪問網址：http://www.20thingsilearned.com

話說這本電子書已經出來很久了，不過今天來看依然覺得相當的讚。我們無需刷新頁面，就可以來回切換電子書頁面，這正是OPOA（One Page One Application）的完美體現。

現在正在學習關於history API這方面的東西，所以特別感興趣的是他們如何使用window.history.pushState()和window.history.replaceState()來做頁面之間的不刷新切換。

今天查閱了一些資料，基本上對history API有了一個基本了解。

首先要說的是history是個全局，即window.history。看到這個變數名稱你一定很熟悉，因為常常可以看到用window.history.back()或window.history.go(-1)來傳回上一頁的JavaScript程式碼。

所以history並不是什麼新東西，在HTML4的時代，我們可以使用它的這幾個屬性和方法：

length：歷史堆疊中的記錄數。

back()：回上一頁。

forward()：前進到下一頁。

go([delta])：delta是個數字，如果不寫或為0，則刷新本頁；如果為正數，則前進到相應數目的頁；若為負數，則後退到相應數目的頁。

現在，HTML5為其又增加了以下2個方法：

pushState(data, title [, url])：往歷史堆疊的頂部新增一條記錄。 data為一個物件或null，它會在觸發window的popstate事件(window.onpopstate)時，作為參數的state屬性傳遞過去；title為頁面的標題，但當前所有瀏覽器都忽略這個參數；url為頁面的URL，不寫則為目前頁面。

replaceState(data, title [, url])：更改目前頁面的歷史記錄。參數同上。這種更改並不會去訪問該URL。不過目前只有Safari 5.0+、Chrome 8.0+、Firefox 4.0+和iOS 4.2.1+支援。如果想要相容舊瀏覽器的話，可以試試History.js，它也修正了一些bug。

當然，在行動平台上，我們可以大膽嘗試html5的history API。 ios3.0+ 和Android2.0+ 平台的內建瀏覽器對history都比較完美了，利用它我們可以web app更趨向與native app。

下面，建議幾篇文章：

.Manipulating the browser history

.Session history and navigation

.Manipulating History for Fun & Profit