如何在不干擾瀏覽器重新載入的情況下偵測使用者在瀏覽器中點選後退按鈕？

偵測瀏覽器中使用者的後退按鈕點擊

在嘗試偵測後退按鈕點擊時，開發人員通常會依賴 window.onbeforeunload 事件偵聽器。但是，此事件不僅會在後退按鈕點擊時觸發，還會在瀏覽器重新載入時觸發，這可能會產生誤導。

在沒有瀏覽器重新加載幹擾的情況下檢測後退按鈕點擊

處理單擊後退按鈕而沒有誤報，請考慮使用量身定制的方法：

1. 歷史記錄修改：

   • 頁面載入時，檢查是否History.pushState API 可用。
   • 如果支持，使用history.pushState 將隨機狀態推送到歷史記錄中。
   • 定義 onpopstate 事件監聽器來處理後退和前進按鈕轉換。

2. 基於雜湊的方法：

   • 如果不支援history.pushState，請使用雜湊更改事件（>
   如果不支援history.pushState，請使用雜湊更改事件（>
   • 如果不支援history.pushState，請使用雜湊更改事件window.onhashchange） .
   • 設定初始雜湊值，並在雜湊變更時檢查非隨機雜湊值。
   使用標誌來確保只有使用者啟動的雜湊變更才會觸發後退按鈕邏輯，忽略瀏覽器重新載入。

實作

<code class="javascript">window.onload = function () {
    if (typeof history.pushState === "function") {
        history.pushState("jibberish", null, null);
        window.onpopstate = function () {
            history.pushState('newjibberish', null, null);
            // Handle back button click here
        };
    }
    else {
        var ignoreHashChange = true;
        window.onhashchange = function () {
            if (!ignoreHashChange) {
                ignoreHashChange = true;
                window.location.hash = Math.random();
                // Handle back button click here
            }
            else {
                ignoreHashChange = false;
            }
        };
    }
}</code>

相容性

相容性此方法據報可以在Chrome 和Firefox 中有效運作。

以上是如何在不干擾瀏覽器重新載入的情況下偵測使用者在瀏覽器中點選後退按鈕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！