首頁 > web前端 > H5教程 > html5的歷史API

html5的歷史API

伊谢尔伦
發布: 2016-11-22 13:51:53
原創
2146 人瀏覽過

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板