首頁 > web前端 > H5教程 > 詳細介紹h5中的history.pushState()使用實例

詳細介紹h5中的history.pushState()使用實例

零下一度
發布: 2017-05-18 10:44:12
原創
5516 人瀏覽過

在 HTML 檔案中,  history.pushState() 方法為瀏覽器歷史新增了一個狀態

pushState() 帶有三個參數:一個狀態對象,一個標題(現在被忽略了),以及一個可選的URL位址。以下將對這三個參數進行細緻的檢查:

state object — 狀態物件是由 pushState()方法建立的、與歷史紀錄相關的JS物件。當使用者定向到一個新的狀態時,會觸發popstate事件。事件的state屬性包含了歷史紀錄的state物件。 (譯者註:總而言之,它儲存JSON字串,可以用在popstate事件中。)state 物件可以是任何可以序列化的東西。由於 火狐 會將這些物件儲存在使用者的磁碟上,所以使用者在重新啟動瀏覽器之後這些state物件會恢復,我們施加一個最大640k 的字串在state物件的序列化表示上。如果你像pushState() 方法傳遞了一個序列化表示大於640k 的state對象,這個方法將會丟出一個異常。如果你需要更多的空間,推薦使用sessionStorage或localStorage。

title — 火狐瀏覽器現在忽略此參數,將來也許可能會被使用。考慮到將來有可能的改變,傳遞一個空字串是安全的做法。當然,你可以傳遞一個短標題給你要轉變成的狀態。 (譯者註:現在大多數瀏覽器不支援或忽略這個參數,最好用null取代)

#URL — 這個參數提供了新歷史紀錄的地址。請注意,瀏覽器在呼叫pushState()方法後不會去載入這個URL,但有可能在之後會這樣做,例如使用者重新啟動瀏覽器之後。新的URL不一定要是絕對位址,如果它是相對的,它一定是相對於目前的URL。新URL必須和目前URL在同一個來源下;否則,pushState() 將丟出異常。這個參數可選,如果它沒有被特別標註,會被設定為文件的目前URL。

Note: 在 Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 到 Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)中,傳輸的物件序列化使用JSON。從Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)開始,該物件使用  the structured clone algorithm(結構式克隆演算法?)進行序列化. 這將允許傳輸更加多樣化的物件。

某些情況下,呼叫pushState和設定 window.location = "#foo"相當,在這種狀況下,這兩種行為都會創造和啟動另一個和目前頁面相關的歷史紀錄。

但是pushState()有其他優點:

新URL可以是目前URL同源下的任意位址。相反的,設定window.location會讓你保持在相同頁面,除非你只修改hash.

如果不必要,你可以不改變URL,相反的,將window.location設定為「#foo」;只會創造一個新的歷史紀錄,如果當前hash不為#foo.

You can associate arbitrary data with your new history entry. With the hash-based approach, you need to encode all of the relevant data into a short string.你可以關聯任意的資料到你的新歷史紀錄。使用基於hash的方法,你需要將所有相關 的資料編碼為一個短字串。

請注意pushState()方法絕不會導致hashchange 事件被激活,即使新的URL和舊的只在hash上有區別。

在 XUL 中,它會創造一個特殊的XUL元素。

在其他文件中,則會建立一個空的URI命名空間

語法EDIT

history.pushState(state, title, url);
登入後複製

#範例EDIT

##創建了一個新的由 state, title, 和 url設定的瀏覽器歷史紀錄.

JavaScript

var state = { 'page_id': 1, 'user_id': 5 };
var title = 'Hello World';var url = 'hello-world.html';
history.pushState(state, title, url);
登入後複製

【相关推荐】

1. 特别推荐“php程序员工具箱”V0.1版本下载

2. js中的window.history的用法(一)

3. js中的window.history的用法(二)

4. 深入了解h5中history特性--pushState、replaceState

5. h5中History API 对Web应用的影响

以上是詳細介紹h5中的history.pushState()使用實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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