如何準確偵測瀏覽器中的後退按鈕點擊？

以更高的準確性檢測瀏覽器中的後退按鈕點擊

簡介：

識別後退按鈕點擊對於實現瀏覽器至關重要導航歷史記錄追蹤。雖然有許多方法，但區分真正的後退按鈕點擊和觸發類似事件的其他瀏覽器操作至關重要。

背景：

一種常見的方法涉及使用視窗.onbeforeunload 事件偵聽器，當使用者嘗試關閉或導航離開頁面時觸發。但是，此事件也會在按 F5 或重新載入頁面等操作時觸發，從而導致誤報。

解決方案：

要解決此問題，需要使用更複雜的方法需要解決方案。該解決方案利用了history.pushState和window.onpopstate方法，它們可以更好地控制導航歷史記錄。

實現：

以下代碼片段演示了實現：

<code class="js">window.onload = function () {
    if (typeof history.pushState === "function") {
        history.pushState("jibberish", null, null);
        window.onpopstate = function () {
            history.pushState('newjibberish', null, null);
            // Handle back (or forward) buttons here
            // Will NOT handle refresh, use onbeforeunload for this.
        };
    } else {
        var ignoreHashChange = true;
        window.onhashchange = function () {
            if (!ignoreHashChange) {
                ignoreHashChange = true;
                window.location.hash = Math.random();
                // Detect and redirect change here
                // Works in older Firefox and Internet Explorer 9
                // * it does mess with your hash symbol (anchor?) pound sign
                // delimiter on the end of the URL
            } else {
                ignoreHashChange = false;
            }
        };
    }
}</code>

說明：

此程式碼使用history.pushState 更新瀏覽器的歷史記錄，而無需重新載入頁面。然後它綁定到 window.onpopstate 事件，該事件在使用者點擊後退或前進按鈕時觸發。

在支援 History.pushState 的瀏覽器中，此方法可以精確偵測後退按鈕單擊，不包括重新載入事件。對於較舊的瀏覽器，程式碼使用基於雜湊變更的回退方法，這在處理井號分隔符號方面引入了輕微的限制。

結論：

這種增強的方法確保準確檢測瀏覽器中的後退按鈕點擊，消除單獨使用 window.onbeforeunload 的限制。它為開發者提供了追蹤導航歷史記錄和增強用戶體驗的可靠解決方案。

以上是如何準確偵測瀏覽器中的後退按鈕點擊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！