History對象

Amio 發(fā)布于2019-08-01 18:32 / 2437人閱讀

摘要：方法接收三個(gè)參數(shù)，依次為一個(gè)與指定網(wǎng)址相關(guān)的狀態(tài)對象，事件觸發(fā)時(shí)，該對象會(huì)傳入回調(diào)函數(shù)。當(dāng)前頁面的對象，即方法中第一個(gè)參數(shù)的值。

基本概念

history接口允許操作瀏覽器的曾經(jīng)在標(biāo)簽頁或者框架里訪問的會(huì)話歷史記錄。

屬性

history.length

history.state

history.scrollRestoration

方法

history.back()

history.forward()

history.go()

history.pushState()

history.replaceState()

history更多屬性和方法，請參考MDN鏈接

history.pushState();

按指定的名稱和URL將數(shù)據(jù)push進(jìn)會(huì)話歷史棧橋。
history.pushState()方法接收三個(gè)參數(shù)，依次為:

state: 一個(gè)與指定網(wǎng)址相關(guān)的狀態(tài)對象，poststate事件觸發(fā)時(shí)，該對象會(huì)傳入回調(diào)函數(shù)。如果不需要這個(gè)對象，此處可以填null.

title: 新頁面的標(biāo)題，但是所有瀏覽器目前都會(huì)忽略這個(gè)值，因此這里可以填null.

url: 新的網(wǎng)址，必須與當(dāng)前頁面處在同一個(gè)域。瀏覽器的地址欄將顯示這個(gè)網(wǎng)址。

注意事項(xiàng)

參數(shù)中url必須和當(dāng)前頁面處在同一個(gè)域下，否則會(huì)報(bào)錯(cuò)。
例如，我在當(dāng)前index.html中使用該方法，url參數(shù)為"https://www.baidu.com".會(huì)出現(xiàn)下面的報(bào)錯(cuò)信息。

調(diào)用了pushState以后，瀏覽器地址欄會(huì)跟隨者發(fā)生變化，但是頁面并不會(huì)刷新，只是在路由棧里面增加了一條記錄。
隨后點(diǎn)擊瀏覽器前進(jìn)后退箭頭，地址欄會(huì)有變化，頁面不會(huì)刷新。但是如果在當(dāng)前瀏覽器地址欄重新輸入一個(gè)地址，然后又返回就會(huì)刷新一次地址。舉例如下：

當(dāng)前頁面是page1.html,調(diào)用pushState(null, null, "page2.html")方法以后,頁面地址變?yōu)閜age2.html.然而頁面顯示的內(nèi)容依舊是page1.html的內(nèi)容。此時(shí)刪掉瀏覽器地址欄參數(shù)，改為"https://www.baidu.com"并回車訪問，去到百度頁面的時(shí)候，然后再點(diǎn)擊瀏覽器返回箭頭，將顯示page2.html頁面內(nèi)容。
當(dāng)然，上面在地址欄重新輸入一個(gè)地址的操作，可以改為任何可以刷新當(dāng)前頁面的操作。比如，window.location.href或者window.location.reload()等等

history.replaceState()

history.replaceState方法的參數(shù)和pushState()方法一模一樣，區(qū)別是它修改瀏覽歷史中當(dāng)前記錄。

history.state

當(dāng)前頁面的state對象，即pushState()方法中第一個(gè)參數(shù)的值。

popstate事件

每當(dāng)同一個(gè)文檔的瀏覽歷史出現(xiàn)變化時(shí)，就會(huì)觸發(fā)popstate事件。
需要注意的是，僅僅調(diào)用pushState方法或replaceState方法，并不會(huì)觸發(fā)該事件，只有用戶點(diǎn)擊瀏覽器倒退按鈕或前進(jìn)按鈕，或者使用JavaScript調(diào)用back,forward,go方法時(shí)才會(huì)觸發(fā)。

使用的時(shí)候可以為popstate事件指定回調(diào)函數(shù)。

window.addEventListener("popstate", function(event) {
  console.log("location: " + document.location);
  console.log("state: " + JSON.stringify(event.state));
});

應(yīng)用

我們知道，Ajax可以實(shí)現(xiàn)頁面無刷新操作。但是，也會(huì)造成另外的問題，即無法前進(jìn)與后退。
當(dāng)執(zhí)行Ajax操作的時(shí)候，往瀏覽器history中塞入一個(gè)地址（使用pushState）;于是，返回的時(shí)候，通過URL或其他傳參，我們就可以還原到Ajax之前的模樣。