簡單聊聊H5的pushState與replaceState

王玉略發表於2018-02-01

之前一直不熟悉history上的`pushState`與`replaceState`方法，今天抽空了解一下，這篇文章很大一部分轉載了MDN的Manipulating the browser history以及window.onpopstate中的內容，有興趣的同學可以直接參考這些文章

一、簡介

HTML5引入了 history.pushState() 和 history.replaceState() 方法，它們分別可以新增和修改歷史記錄條目。這些方法通常與window.onpopstate 配合使用。

二、pushState() 方法的例子

假設在 http://mozilla.org/foo.html 中執行了以下 JavaScript 程式碼:

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

這將使瀏覽器位址列顯示為 http://mozilla.org/bar.html，但並不會導致瀏覽器載入 bar.html ，甚至不會檢查bar.html 是否存在。

假設現在使用者又訪問了 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 事件時可能會改變自己的內容，其內容仍與之前的展現一致。

三、pushState() 方法

pushState() 需要三個引數: 一個狀態物件, 一個標題 (目前被忽略), 和 (可選的) 一個URL. 讓我們來解釋下這三個引數詳細內容：

狀態物件 — 狀態物件state是一個JavaScript物件，通過pushState () 建立新的歷史記錄條目。無論什麼時候使用者導航到新的狀態，popstate事件就會被觸發，且該事件的state屬性包含該歷史記錄條目狀態物件的副本。

標題 — 目前忽略這個引數被忽略，但未來可能會用到。傳遞一個空字串在這裡是安全的，而在將來這是不安全的。二選一的話，你可以為跳轉的state傳遞一個短標題。

URL — 該引數定義了新的歷史URL記錄。注意，呼叫 pushState() 後瀏覽器並不會立即載入這個URL，但可能會在稍後某些情況下載入這個URL，比如在使用者重新開啟瀏覽器時。新URL不必須為絕對路徑。如果新URL是相對路徑，那麼它將被作為相對於當前URL處理。新URL必須與當前URL同源，否則 pushState() 會丟擲一個異常。該引數是可選的，預設為當前URL。

四、pushState() 方法與設定hash值的區別

在某種意義上，呼叫 pushState() 與設定 window.location = "#foo" 類似，二者都會在當前頁面建立並啟用新的歷史記錄。但 pushState() 具有如下幾條優點：

新的 URL 可以是與當前URL同源的任意URL 。而設定 window.location 僅當你只修改了雜湊值時才保持同一個檔案。

如果需要，可以不必改變URL就能建立一條歷史記錄。而設定 window.location = "#foo";,只有在當前雜湊不是 #foo 的情況下，才會建立一個新的歷史記錄項。

我們可以為新的歷史記錄項關聯任意資料。而基於雜湊值的方式，則必須將所有相關資料編碼到一個短字串裡。

五、replaceState() 方法

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

六、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()方法)。

七、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}
複製程式碼

八、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>
複製程式碼