歷史記錄API是瀏覽器讓您與地址欄和導航歷史記錄進行交互的方式
介紹
歷史API可讓您與瀏覽器歷史記錄交互,觸發瀏覽器導航方法和更改地址欄內容。
與現代的單頁應用程序結合使用時特別有用,在該應用程序中,您永遠不會在服務器端請求新頁面,而是頁面始終是相同的:只是內部內容髮生了變化。
一種現代JavaScript應用程序在未與History API進行交互的瀏覽器中(無論是顯式的還是在框架級別)運行,對於用戶而言將是糟糕的體驗,因為後退和前進按鈕中斷。
另外,在瀏覽應用程序時,視圖發生變化,但地址欄沒有變化。
並且重新加載按鈕中斷:由於沒有深層鏈接,因此重新加載頁面將使瀏覽器顯示其他頁面
歷史記錄API是HTML5中引入的,現已發布所有現代瀏覽器均支持。 IE從10版開始就支持它,如果您需要支持IE9和更早的版本,請使用History.js庫。
訪問歷史記錄API
歷史記錄API可在window
對象,因此您可以這樣稱呼它:window.history
或者history
, 自從window
是全局對象。
瀏覽歷史
讓我們從您可以使用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初學者手冊
更多瀏覽器教程:
- HTML5提供了一些有用的技巧
- 我如何使基於CMS的網站脫機工作
- 漸進式Web應用程序完整指南
- 提取API
- 推送API指南
- 頻道消息傳遞API
- 服務人員教程
- 緩存API指南
- 通知API指南
- 深入IndexedDB
- Selectors API:querySelector和querySelectorAll
- 通過延遲和異步有效地加載JavaScript
- 文檔對像模型(DOM)
- Web存儲API:本地存儲和會話存儲
- 了解HTTP Cookies的工作原理
- 歷史API
- WebP圖像格式
- XMLHttpRequest(XHR)
- 深入的SVG教程
- 什麼是數據網址
- 學習網絡平台的路線圖
- CORS,跨域資源共享
- 網絡工作者
- requestAnimationFrame()指南
- 什麼是Doctype
- 使用DevTools控制台和控制台API
- 語音合成API
- 如何在純JavaScript中等待DOM ready事件
- 如何將類添加到DOM元素
- 如何遍歷來自querySelectorAll的DOM元素
- 如何從DOM元素中刪除類
- 如何檢查DOM元素是否具有類
- 如何更改DOM節點值
- 如何將click事件添加到從querySelectorAll返回的DOM元素列表中
- WebRTC,實時Web API
- 如何在JavaScript中獲取元素的滾動位置
- 如何替換DOM元素
- 如何只接受輸入文件字段中的圖像
- 為什麼要使用瀏覽器的預覽版?
- 斑點對象
- 文件對象
- FileReader對象
- FileList對象
- ArrayBuffer
- ArrayBufferView
- URL對象
- 類型數組
- DataView對象
- BroadcastChannel API
- Streams API
- FormData對象
- 導航器對象
- 如何使用地理位置API
- 如何使用getUserMedia()
- 如何使用拖放API
- 如何在網頁上滾動
- 在JavaScript中處理表單
- 鍵盤事件
- 鼠標事件
- 觸摸事件
- 如何從DOM元素中刪除所有子級
- 如何使用原始Javascript創建HTML屬性
- 如何檢查是否使用JavaScript選中了複選框?
- 如何使用JavaScript複製到剪貼板
- 如何使用JavaScript禁用按鈕
- 如何在瀏覽器中使頁面可編輯
- 如何使用URLSearchParams在JavaScript中獲取查詢字符串值
- 如何一次刪除頁面上的所有CSS
- 如何使用insertAdjacentHTML
- Safari,退出前警告
- 如何使用JavaScript將圖像添加到DOM
- 如何重設表格
- 如何使用Google字體