不得不佩服下谷歌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