歷史API

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

介紹

歷史API可讓您與瀏覽器歷史記錄交互觸發瀏覽器導航方法更改地址欄內容

與現代的單頁應用程序結合使用時特別有用,在該應用程序中,您永遠不會在服務器端請求新頁面,而是頁面始終是相同的:只是內部內容髮生了變化。

一種現代JavaScript應用程序在未與History API進行交互的瀏覽器中(無論是顯式的還是在框架級別)運行,對於用戶而言將是糟糕的體驗,因為後退和前進按鈕中斷

另外,在瀏覽應用程序時,視圖發生變化,但地址欄沒有變化

並且重新加載按鈕中斷:由於沒有深層鏈接,因此重新加載頁面將使瀏覽器顯示其他頁面

歷史記錄API是HTML5中引入的,現已發布所有現代瀏覽器均支持。 IE從10版開始就支持它,如果您需要支持IE9和更早的版本,請使用History.js庫

訪問歷史記錄API

歷史記錄API可在window對象,因此您可以這樣稱呼它:window.history或者history, 自從window是全局對象。

The History object

讓我們從您可以使用History API進行的最簡單的操作開始。

返回上一個頁面:

history.back()

這將轉到會話歷史記錄中的上一個條目。您可以使用轉到下一頁

history.forward()

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

go()使您可以向後或向前深入瀏覽多個級別。例如

history.go(-1) //equivalent to history.back()
history.go(-2) //equivalent to calling history.back() twice
history.go(1) //equivalent to history.forward()
history.go(3) //equivalent to calling history.forward() 3 times

要知道歷史記錄中有多少個條目,您可以致電

history.length

在歷史記錄中添加一個條目

使用pushState()您可以以編程方式創建新的歷史記錄條目。您傳遞3個參數。

第一個是可以包含任何內容的對象(但是存在大小限制,並且該對象需要可序列化)。

當前主流瀏覽器未使用第二個參數,因此通常傳遞一個空字符串。

第三個參數是與新狀態關聯的URL。請注意,該URL必須屬於當前URL的同一原始域。

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

調用它不會更改頁面的內容,也不會引起任何瀏覽器操作,例如更改window.location將。

修改歷史記錄條目

儘管pushState()使您可以向歷史記錄添加新狀態,replaceState()允許您編輯當前歷史記錄狀態。

history.pushState({}, '', '/posts')
const state = { post: 'first' }
history.pushState(state, '', '/post/first')
const state = { post: 'second' }
history.replaceState(state, '', '/post/second')

如果您現在打電話

history.back()

瀏覽器直接進入/posts, 自從/post/first曾是已取代經過/post/second

訪問當前歷史記錄輸入狀態

進入物業

history.state

返回當前狀態對象(傳遞給pushState或者replaceState)。

onpopstate事件

調用此事件window每次活動歷史記錄狀態更改時,都將當前狀態作為回調參數:

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

將記錄新的狀態對象(傳遞給第一個參數pushState或者replaceState)每次您致電history.back()history.forward()或者history.go()

免費下載我的JavaScript初學者手冊


更多瀏覽器教程: