簡單聊聊H5的pushState與replaceState

以前一直不熟悉history上的pushStatereplaceState方法,今天抽空了解一下,這篇文章很大一部分轉載了MDN的Manipulating the browser history以及window.onpopstate中的內容,有興趣的同窗能夠直接參考這些文章

1、簡介

HTML5引入了 history.pushState()history.replaceState() 方法,它們分別能夠添加和修改歷史記錄條目。這些方法一般與window.onpopstate 配合使用。javascript

2、pushState() 方法的例子

假設在 http://mozilla.org/foo.html 中執行了如下 JavaScript 代碼:html

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

這將使瀏覽器地址欄顯示爲 http://mozilla.org/bar.html,但並不會致使瀏覽器加載 bar.html ,甚至不會檢查bar.html 是否存在。java

假設如今用戶又訪問了 http://google.com,而後點擊了返回按鈕。此時,地址欄將顯示 http://mozilla.org/bar.html,同時頁面會觸發 popstate 事件,事件對象state中包含了 stateObj 的一份拷貝。頁面自己與 foo.html 同樣,儘管其在 popstate 事件中可能會修改自身的內容。瀏覽器

若是咱們再次點擊返回按鈕,頁面URL會變爲http://mozilla.org/foo.html,文檔對象document會觸發另一個 popstate 事件,這一次的事件對象state object爲null。 這裏也同樣,返回並不改變文檔的內容,儘管文檔在接收 popstate 事件時可能會改變本身的內容,其內容仍與以前的展示一致。安全

3、pushState() 方法

pushState() 須要三個參數: 一個狀態對象, 一個標題 (目前被忽略), 和 (可選的) 一個URL. 讓咱們來解釋下這三個參數詳細內容:函數

狀態對象 — 狀態對象state是一個JavaScript對象,經過pushState () 建立新的歷史記錄條目。不管何時用戶導航到新的狀態,popstate事件就會被觸發,且該事件的state屬性包含該歷史記錄條目狀態對象的副本。網站

標題 — 目前忽略這個參數被忽略,但將來可能會用到。傳遞一個空字符串在這裏是安全的,而在未來這是不安全的。二選一的話,你能夠爲跳轉的state傳遞一個短標題。ui

URL — 該參數定義了新的歷史URL記錄。注意,調用 pushState() 後瀏覽器並不會當即加載這個URL,但可能會在稍後某些狀況下加載這個URL,好比在用戶從新打開瀏覽器時。新URL沒必要須爲絕對路徑。若是新URL是相對路徑,那麼它將被做爲相對於當前URL處理。新URL必須與當前URL同源,不然 pushState() 會拋出一個異常。該參數是可選的,缺省爲當前URL。google

4、pushState() 方法與設置hash值的區別

在某種意義上,調用 pushState() 與 設置 window.location = "#foo" 相似,兩者都會在當前頁面建立並激活新的歷史記錄。但 pushState() 具備以下幾條優勢:編碼

新的 URL 能夠是與當前URL同源的任意URL 。而設置 window.location 僅當你只修改了哈希值時才保持同一個文件。

若是須要,能夠沒必要改變URL就能建立一條歷史記錄。而設置 window.location = "#foo";,只有在當前哈希不是 #foo 的狀況下, 纔會建立一個新的歷史記錄項。

咱們能夠爲新的歷史記錄項關聯任意數據。而基於哈希值的方式,則必須將全部相關數據編碼到一個短字符串裏。

5、replaceState() 方法

history.replaceState() 的使用與 history.pushState() 很是類似,區別在於 replaceState() 是修改了當前的歷史記錄項而不是新建一個。

6、popstate 事件

每當處於激活狀態的歷史記錄條目發生變化時,popstate 事件就會在對應window對象上觸發。 若是當前處於激活狀態的歷史記錄條目是由history.pushState()方法建立,或者由history.replaceState()方法修改過的, 則popstate事件對象的state屬性包含了這個歷史記錄條目的state對象的一個拷貝。

咱們也能夠直接在history對象上獲取state,以下:

var currentState = history.state;
複製代碼

須要注意的是,調用 history.pushState() 或者 history.replaceState() 不會觸發 popstate 事件。 opstate事件只會在瀏覽器某些行爲下觸發, 好比點擊後退、前進按鈕(或者在JavaScript中調用history.back()history.forward()history.go()方法)。

7、popstate 事件的例子

假如當前網頁地址爲 http://example.com/example.html ,則運行下述代碼後:

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//綁定事件處理函數. 
history.pushState({page: 1}, "title 1", "?page=1");    //添加並激活一個歷史記錄條目 http://example.com/example.html?page=1,條目索引爲1
history.pushState({page: 2}, "title 2", "?page=2");    //添加並激活一個歷史記錄條目 http://example.com/example.html?page=2,條目索引爲2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改當前激活的歷史記錄條目 http://ex..?page=2 變爲 http://ex..?page=3,條目索引爲3
history.back(); // 彈出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 彈出 "location: http://example.com/example.html, state: null
history.go(2);  // 彈出 "location: http://example.com/example.html?page=3, state: {"page":3}
複製代碼

8、pushState()的用途

王二使用 pushState() 主要是它能夠監聽到瀏覽器上的返回事件,這在移動端上也一樣適用,參考以下一段代碼(能夠直接運行):

<body>
    <div>window.onpopstate能夠監聽到返回鍵事件</div>
    <script> history.pushState({}, ""); window.onpopstate = function(event) { //這裏能夠監聽到瀏覽器的返回事件,並作你想作的事情, //例如:跳轉到另外一個網頁 location.href = "https://www.baidu.com"; }; </script>
</body>
複製代碼

固然,用 window.onhashchange 也能夠監聽到瀏覽器上的返回事件,參考以下一段代碼(能夠直接運行):

<body>
    <div>window.onhashchange能夠監聽到返回鍵事件</div>
    <script> setTimeout(()=>{ location.hash="a" },100); setTimeout(()=>{ window.onhashchange = function(event) { location.href = "https://www.baidu.com"; } },200); </script>
</body>
複製代碼

9、參考文章

'pushState'、'replaceState'MDN文檔(中文翻譯版)

'onpopstate'MDN文檔(中文翻譯版)

原文發表於王玉略的我的網站

相關文章
相關標籤/搜索