/

歷史API

歷史API

歷史API是瀏覽器讓你與地址欄和導航歷史進行交互的方式。

介紹

歷史API允許你與瀏覽器歷史進行交互，觸發瀏覽器導航方法並更改地址欄的內容。

它在現代的單頁應用程序中特別有用，這種應用程序通常不會為新頁面發出服務器端請求，而只是內容發生變化而已。

如果一個在瀏覽器中運行的現代JavaScript應用程序不明確地或在框架層面上與歷史API進行交互，將會給用戶帶來很差的體驗，因為前進和後退按鈕將無法使用。

同時，當導航應用程序時，視圖會改變，但地址欄不會變化。

且刷新按鈕無法使用：刷新頁面時，由於缺少深度鏈接，瀏覽器會顯示一個不同的頁面。

歷史API是在HTML5引入的，並且現在所有現代瀏覽器都支持。IE自10版就支持，如果你需要支持IE9及更早版本，可使用History.js庫。

訪問歷史API

歷史API可在window對象上使用，所以你可以像這樣調用它：window.history或history，因為window是全局對象。

歷史對象

導航歷史

先從歷史API中最簡單的操作開始。

返回上一頁：

1
history.back()

這將返回到會話歷史的前一個條目。你可以使用以下方式前往下一頁：

1
history.forward()

這和使用瀏覽器的前進和後退按鈕是一樣的。

go()方‌​法可讓你多級路徑地返回或前進。例如：

1
2
3
4
history.go(-1) //等同於`history.back()`
history.go(-2) //等同於連續兩次調用`history.back()`
history.go(1) //等同於`history.forward()`
history.go(3) //等同於連續三次調用`history.forward()`

要知道歷史記錄中有多少條目，你可以調用：

1
history.length

向歷史記錄中添加條目

使用 pushState() 方法可以以程式方式創建一個新的歷史記錄條目。你需要傳遞3個參數。

第一個參數是一個對象，可以包含任何內容（然而有大小限制並且對象需要可序列化）。

第二個參數目前由主要瀏覽器未用到，因此通常傳遞空字符串。

第三個參數是與新狀態相關聯的URL。請注意，該URL必須屬於與當前URL相同的起源域。

1
2
const state = { name: 'Flavio' }
history.pushState(state, '', '/user')

調用此方法不會更改頁面的內容，也不會引起任何像更改window.location一樣的瀏覽器動作。

修改歷史記錄條目

pushState() 可以添加新的狀態到歷史記錄，而replaceState()則可以編輯當前的歷史記錄狀態。

1
2
3
4
5
history.pushState({}, '', '/posts')
const state = { post: 'first' }
history.pushState(state, '', '/post/first')
const state = { post: 'second' }
history.replaceState(state, '', '/post/second')

如果你現在調用

1
history.back()

瀏覽器會直接跳轉到/posts，因為/post/first被/post/second所替換。

訪問當前的歷史記錄條目狀態

訪問屬性

1
history.state

會返回當前的狀態對象（即傳遞給pushState或replaceState的第一個參數）。

onpopstate事件

每次活動的歷史狀態更改時，onpopstate事件都會在window上被觸發，並以當前狀態作為回調參數。

1
2
3
window.onpopstate = event => {
 console.log(event.state)
}

每次調用history.back()、history.forward()或history.go()時都會記錄新狀態對象（傳遞給pushState或replaceState的第一個參數）。

tags: [“JavaScript”, “History API”, “Single Page Applications”]