location.hash和back history

Question

是否有一個函數可以調用以防止瀏覽器在更改哈希值時記錄后面的歷史記錄條目？

我正在編寫一個簡單的JavaScript庫，當用戶瀏覽每個圖像時，它會更改瀏覽器URL而無需重新加載頁面。

這可以通過將location.hash設置為圖像的唯一ID來完成。

window.location.hash = imageID;

問題是當用戶點擊瀏覽器后退按鈕時，他們必須向后移動每個圖像，就像頁面加載一樣。

如果他們使用圖庫旋轉了20個圖像，則必須單擊21次才能返回上一頁。

如何防止使用javascript記錄回溯歷史記錄？

Answer 1

window.location.replace將允許您設置URL而不將其添加到瀏覽器歷史記錄中。

var baseUrl = window.location.href.split('#')[0];
window.location.replace( baseUrl + '#' + imageID );

文件

Answer 2

您可以使用replaceState（） 。

在更改哈希值之前保存歷史記錄，然后更改哈希值，最后將歷史記錄替換為保存的歷史記錄。

或者，您可以使用popState事件 。