介紹
JavaScript History API 是 Web API 的一部分，它允許我們與 瀏覽器的會(huì)話歷史記錄 進(jìn)行交互。它提供了方法和屬性來導(dǎo)航、操作和控制歷史堆棧，使開發(fā)人員能夠創(chuàng)建更加動(dòng)態(tài)和交互式的用戶體驗(yàn)，而無需重新加載整個(gè)頁面。
JavaScript History API 的主要功能
- history.back()
- history.forward()
- history.go(n)
- history.pushState()
- history.replaceState()
History.back() 方法
此方法將瀏覽器移動(dòng)到會(huì)話歷史記錄中的上一頁，相當(dāng)于瀏覽器的后退按鈕。僅當(dāng)瀏覽器的歷史堆棧中存在上一頁時(shí)，此操作才有效。
示例：
<!DOCTYPE html>
<html>
<body>
<h1>The Window History Object</h1>
<h2>The history.back() Method</h2>
<button onclick="history.back()">Go Back</button>
</body>
</html>
輸出：
單擊“返回”按鈕會(huì)將用戶帶到上一頁（如果歷史堆棧中存在）。
History.forward() 方法
此方法將瀏覽器移動(dòng)到會(huì)話歷史記錄中的下一頁，相當(dāng)于瀏覽器的前進(jìn)按鈕。僅當(dāng)瀏覽器歷史堆棧中存在下一頁時(shí)，此操作才有效。
示例：
<!DOCTYPE html>
<html>
<body>
<h1>The Window History Object</h1>
<h2>The history.forward Method</h2>
<button onclick="history.forward()">Go Forward</button>
</body>
</html>
輸出：
單擊“前進(jìn)”按鈕會(huì)將用戶帶到下一頁（如果歷史堆棧中存在）。
History.go() 方法
此方法用于導(dǎo)航到瀏覽器堆棧中的特定點(diǎn)。它需要一個(gè)參數(shù)'n'，它指定我們想要通過歷史堆棧導(dǎo)航到的頁面的編號(hào)。
參數(shù) 'n' 可以接受以下值：
-
正數(shù)“n” 使用戶在堆棧中前進(jìn)。
-
負(fù)數(shù)“n” 使用戶在堆棧中向后。
- 如果'n'的值為0，它重新加載當(dāng)前頁面。
History.pushState() 方法
此方法用于在當(dāng)前會(huì)話的歷史堆棧中添加新條目，即當(dāng)前瀏覽器選項(xiàng)卡中訪問過的所有頁面的集合。
示例：
我們將創(chuàng)建一個(gè)按鈕元素并為其分配一個(gè)點(diǎn)擊處理程序。在處理程序內(nèi)部，我們調(diào)用 pushState() 方法。這添加了一個(gè)具有與當(dāng)前頁面不同的URL的新條目。
// HTML ->
<button>Call pushState()</button>
// JavaScript ->
var button = document.querySelector('button');
button.onClick = function() {
history.pushState(null, ' ', 'some-page');
}
輸出：
目前，網(wǎng)址是 - https://www.codeguage.com/courses/js/examples/pushstate
當(dāng)您點(diǎn)擊按鈕時(shí)，URL 將更改為 - https://www.codeguage.com/courses/js/examples/some-page
這確認(rèn)新條目已添加到當(dāng)前會(huì)話的歷史記錄，同時(shí)更改瀏覽器地址欄中的 URL。您還可以看到瀏覽器的后退箭頭現(xiàn)在在左上角也處于活動(dòng)狀態(tài)，單擊該箭頭將帶您返回 -
https://www.codeguage.com/courses/js/examples/pushstate
要知道的一件極其重要的事情是 pushState() 會(huì)更改 URL，而不會(huì)檢查它是否實(shí)際存在。這是因?yàn)?PushState() 的目的不是加載網(wǎng)頁，而是只是向歷史記錄添加新條目。
History.replaceState() 方法
此方法用新條目替換當(dāng)前會(huì)話歷史堆棧中的當(dāng)前條目。
示例：
和以前一樣，我們有一個(gè)帶有點(diǎn)擊處理程序集的按鈕。但這一次，在處理程序內(nèi)部，我們調(diào)用 replaceState()?將當(dāng)前歷史記錄條目替換為新條目。
<!DOCTYPE html>
<html>
<body>
<h1>The Window History Object</h1>
<h2>The history.back() Method</h2>
<button onclick="history.back()">Go Back</button>
</body>
</html>
輸出：
當(dāng)前網(wǎng)址是 -
https://www.codeguage.com/courses/js/examples/replacestate
當(dāng)您點(diǎn)擊按鈕時(shí)，URL 將更改為 -
https://www.codeguage.com/courses/js/examples/some-page
瀏覽器網(wǎng)址已被替換，您可以注意到左上角的后退箭頭鍵未激活，確認(rèn)新條目已尚未添加到歷史堆棧，我們剛剛用新條目替換了當(dāng)前條目。
就是這樣！您已經(jīng)成功了解了 JavaScript History API，以及如何在您的應(yīng)用程序中使用和合并其不同的實(shí)用程序。
在 LinkedIn 上與我聯(lián)系 :- Linkedin
請(qǐng)查看我的 GitHub，了解精彩的項(xiàng)目：- Github
查看我的個(gè)人作品集：- Aryan 的作品集
以上是JavaScript 歷史 API的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！