一、簡介
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>
<p>window.onpopstate可以監聽到返回鍵事件</p>
<script>
history.pushState({}, "");
window.onpopstate = function(event) {
//這里可以監聽到瀏覽器的返回事件，并做你想做的事情，
//例如：跳轉到另一個網頁
location.href = "https://www.baidu.com";
};
</script>
</body>當然，用 window.onhashchange 也可以監聽到瀏覽器上的返回事件，參考如下一段代碼(可以直接運行）：
<body>
<p>window.onhashchange可以監聽到返回鍵事件</p>
<script>
setTimeout(()=>{
location.hash="a"
},100);
setTimeout(()=>{
window.onhashchange = function(event) {
location.href = "https://www.baidu.com";
}
},200);
</script>
</body>相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！
推薦閱讀：
H5+WebWorkers多線程開發使用詳解
CSS3二級導航菜單制作步驟詳解
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
