History對象允許我們操作瀏覽器會話歷史，即加載當(dāng)前頁面的標(biāo)簽頁窗口或frame窗口的訪問歷史。之前有同學(xué)咨詢我如何實(shí)現(xiàn)攔截用戶跳轉(zhuǎn)頁面并強(qiáng)制用戶返回首頁后重新請求頁面，于是有了本篇博客的主題，本篇深入介紹瀏覽器會話歷史的操作，在最后對比加載頁面的幾種不同方式，并提供一個(gè)實(shí)例給讀者把玩。

屬性

• History.length

  只讀的，其值為一個(gè)整數(shù)，標(biāo)志包括當(dāng)前頁面在內(nèi)的會話歷史中的記錄數(shù)量，比如我們通常打開一個(gè)空白窗口，length為0，再訪問一個(gè)頁面，其length變?yōu)?。

• History.scrollRestoration

  允許web應(yīng)用在會話歷史導(dǎo)航時(shí)顯式地設(shè)置默認(rèn)滾動(dòng)復(fù)原，其值為auto或manual。

• History.state

  只讀，返回代表會話歷史堆棧頂部記錄的任意可序列化類型數(shù)據(jù)值，我們可以以此來區(qū)別不同會話歷史紀(jì)錄。

方法

• History.back()

  返回會話歷史記錄中的上一個(gè)頁面，等價(jià)于window.history.go(-1)和點(diǎn)擊瀏覽器的后退按鈕。

• History.forward()

  進(jìn)入會話歷史記錄中的下一個(gè)頁面，等價(jià)于window.history.go(1)和點(diǎn)擊瀏覽器的前進(jìn)按鈕。

• History.go()

  加載會話歷史記錄中的某一個(gè)頁面，通過該頁面與當(dāng)前頁面在會話歷史中的相對位置定位，如，-1代表當(dāng)前頁面的上一個(gè)記錄，1代表當(dāng)前頁面的下一個(gè)頁面。若不傳參數(shù)或傳入0，則會重新加載當(dāng)前頁面；若參數(shù)超出當(dāng)前會話歷史紀(jì)錄數(shù)，則不進(jìn)行操作。

• History pushState()

  在會話歷史堆棧頂部插入一條記錄，參數(shù)包括，任意可序列化的object對象數(shù)據(jù)（可選），頁面標(biāo)題（可選），頁面URL（非空）。

  目前，Firefox忽略頁面標(biāo)題參數(shù)。

• History.replaceState()

  更新會話歷史堆棧頂部記錄信息，包括特定的任意可序列化的object對象數(shù)據(jù)（可選），頁面標(biāo)題（可選），頁面URL。

值得注意的是，無論是replaceState()方法還是pushState()方法，其更新或添加會話歷史記錄后，改變的只是瀏覽器關(guān)于當(dāng)前頁面的標(biāo)題和URL的記錄情況，并不會刷新或改變頁面展示。

window.history

window的history是只讀屬性，該屬性返回History對象的一個(gè)引用，支持我們操作瀏覽器會話歷史記錄。

出于安全考慮，History對象不允許我們通過JavaScript代碼訪問其他會話歷史記錄中其他頁面的URL，但是它允許我們在不同頁面間進(jìn)行導(dǎo)航。

onpopstate事件

HTML5中，提供history.pushState()和history.replaceState()方法，支持我們添加或更新會話歷史記錄，另外還提供window.onpopstate事件支持我們對該操作進(jìn)行監(jiān)聽。

pushState()

pushState()方法接收三個(gè)參數(shù)，一個(gè)state對象，一個(gè)頁面標(biāo)題，一個(gè)URL:

狀態(tài)對象：

存儲新添會話歷史記錄的狀態(tài)信息對象，每次訪問該條會話時(shí)，都會觸發(fā)popstate事件，并且事件回調(diào)函數(shù)會接收一個(gè)參數(shù)，值為該事件對象的復(fù)制副本；

狀態(tài)對象可以是任何可序列化的數(shù)據(jù)，瀏覽器將狀態(tài)對象存儲在用戶的磁盤以便用戶再次重啟瀏覽器時(shí)能恢復(fù)數(shù)據(jù)；

一個(gè)狀態(tài)對象序列化后的最大長度是640K，如果傳遞數(shù)據(jù)過大，則會拋出異常。

頁面標(biāo)題：

目前 ，該參數(shù)值會被忽略，暫不被使用，可以傳入空字符串。

頁面URL：

此參數(shù)聲明新添會話記錄的入口URL；

在調(diào)用pushState()方法后，瀏覽器不會加載URL指向的頁面（在重啟瀏覽器后或許會加載新頁面 ），我們可以在popstate事件回調(diào)中處理頁面是否加載；

此URL必須與當(dāng)前頁面URL同源,，否則會拋異常；其值可以是絕對地址，也可以是相對地址，相對地址會被基于當(dāng)前頁面URL解析 得到絕對地址；若其值為空，則默認(rèn)是當(dāng)前頁面URL。

pushState()方法可以改變URL地址欄，在會話歷史堆棧頂部插入一條新會話記錄，如：

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

假如當(dāng)前訪問頁面http://blog.codingplayboy.com，則執(zhí)行以上js代碼后，瀏覽器地址欄變?yōu)閔ttp://blog.codingplayboy.com/bar.html，頁面展示并沒有變化，隨后，

• 若我們點(diǎn)擊瀏覽器的后退按鈕，頁面也不會變化，只是瀏覽器的地址欄URL變換為之前的http://blog.codingplayboy.com；
• 若我們點(diǎn)擊跳轉(zhuǎn)到http://blog.codingplayboy.com/about.html,然后再點(diǎn)擊瀏覽器的后退按鈕，則頁面會回退到http://blog.codingplayboy.com/bar.html頁面，且在該頁面觸發(fā)popstate事件，會向事件回調(diào)傳入一個(gè)之前定義的stateObj的復(fù)制值參數(shù)；
• 我們可以在popstate事件回調(diào)中執(zhí)行我們的任務(wù)，但是必須知道的是，只有當(dāng)當(dāng)前頁面DOM加載完成（即DOMContentLoaded事件發(fā)生）后才會觸發(fā)popstate事件。
• pushState()方法不會觸發(fā)hashchange事件，即使URL的hash片段值改變。

replaceState()

與history.pushState()方法相比，history.replaceState()方法不創(chuàng)建新的會話歷史，而是更新當(dāng)前會話歷史記錄，如更新當(dāng)前會話記錄的狀態(tài)對象或URL。

popstate事件

每次會話記錄變換激活都會在window上觸發(fā)popstate事件，如果激活的會話記錄是通過replaceState()更新的或使用pushState()方法創(chuàng)建的，popstate事件對象的state屬性值就是該會話記錄狀態(tài)對象的一個(gè)副本。

location.reload()與location.replace()小結(jié)

我們知道location.reload()和location.replace()方法還有直接設(shè)置location值，都可以重新加載頁面，但是這三種方式也是有區(qū)別的：

reload()

• 語法

  location.reload(beForceGet)

• 參數(shù)

  beForceGet，可選，值為true或false；默認(rèn)為false，表示是否從客戶端緩存讀取當(dāng)前頁；為true時(shí)，則從服務(wù)端重新請求頁面（相當(dāng)于F5刷新和history.go(0)方法）。

replace()

• 語法

  location.replace(url)

• 參數(shù)

  一個(gè)相對或絕對URL，使用相對于當(dāng)前頁URL解析后的URL替換當(dāng)前會話記錄的URL，效果與使用history.replaceState()方法修改URL相同；

• 對比reload()

  location.reload()會取客戶端的緩存頁面，但是location.replace(url)總是重新請求加載url指向的頁面。

location賦值

• 語法

  location.href = url;
  或
  location.assign(url);

• 說明

  可以為location直接設(shè)置一個(gè)URL值，該值等效于使用pushState()修改URL，會創(chuàng)建一條新會話記錄。

攔截用戶返回頁面及強(qiáng)制請求新頁面實(shí)例

點(diǎn)此傳送到實(shí)例訪問地址

首先，我們進(jìn)入首頁index.html，并點(diǎn)擊任意跳轉(zhuǎn)，跳轉(zhuǎn)到第二頁a.html（當(dāng)然在實(shí)際應(yīng)用中可以是任意頁面），然后點(diǎn)擊返回，我們會發(fā)現(xiàn)，并沒有返回到我們訪問的首頁，而是進(jìn)入了我們設(shè)置的攔截頁，具體如何實(shí)現(xiàn)的呢，因?yàn)槲覀冊诘诙撝芯帉慗avaScript代碼實(shí)現(xiàn)：

;(function() {window.onpopstate = function(event) { console.log(event.state); location.replace('replace.html'); }; history.pushState({name: '驚鴻'}, '', 'a.html?history=1'); })();

我們調(diào)用pushState()方法創(chuàng)建了一條新會話記錄（該會話URL為a.html?history=1，仔細(xì)看瀏覽器地址欄變URL變成了a.html?history=1,），并綁定了popstate事件回調(diào)，當(dāng)瀏覽器返回時(shí)，會退回到上一條會話記錄，即a.html會話，然后觸發(fā)popstate事件，在事件回調(diào)函數(shù)中，我們調(diào)用location.replace('replace.html')將a.html頁面跳轉(zhuǎn)至replace.html（可以是任意同源頁面），這就實(shí)現(xiàn)了攔截用戶跳轉(zhuǎn)；隨后，再次點(diǎn)擊返回，會返回到我們訪問的第一個(gè)頁面，我們查看NetWork請求會發(fā)現(xiàn)不同于之前返回的頁面（請求狀態(tài)碼為304），其狀態(tài)碼是200，說明是一次新的請求，這是因?yàn)樵趓eplace.html頁面中，加了如下代碼：

;(function() {window.onpopstate= function(event) { console.log(event.state); document.location.replace(location.href); }; })();

我們在popstate事件回調(diào)中，使用location.replace()方法強(qiáng)制刷新了當(dāng)前頁面；當(dāng)我們在攔截頁點(diǎn)擊返回時(shí)，會回退到第一頁會話，URL為index.html，然后觸發(fā)popstate事件，執(zhí)行document.location.replace(location.href);刷新頁面。

pushState()和replaceState()能做的比我們想象的要多，本文比較詳細(xì)的對其進(jìn)行了介紹，有興趣的同學(xué)可以參考MDN或玩w3c，進(jìn)行更深入的學(xué)習(xí)，也可以搜索PJAX，即PushState和Ajax，同時(shí)使用這兩個(gè)工具，可以極大加快網(wǎng)站響應(yīng)速度。

歡迎移步我的個(gè)人博客

總結(jié)

以上是生活随笔為你收集整理的深入学习 History 对象管理浏览器会话历史的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。