偵測Web 瀏覽器中的後退按鈕點擊:解決錯誤觸發器
當嘗試偵測使用者的後退按鈕點擊時,開發人員通常依賴window.onbeforeunload 事件。然而,這種方法有一個限制:它也會在執行其他操作時觸發,例如刷新頁面。
更全面的解決方案是區分後退按鈕點擊和其他事件:
使用History API:
此方法針對支援History API( history.pushState 函數)的瀏覽器:
<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 button clicks here (excluding refresh) }; } else { ... // Handle non-History API browsers } }</code>
使用雜湊變更:
對於不支援History API 的瀏覽器,可以使用雜湊變更來實現後備解決方案:
<code class="js">window.onload = function () { ... // Similar to History API code } else { var ignoreHashChange = true; window.onhashchange = function () { if (!ignoreHashChange) { ignoreHashChange = true; window.location.hash = Math.random(); // Detect back button click here // Note: Messes with hash symbol at the end of URL } else { ignoreHashChange = false; } }; }</code>
處理刷新問題:
雖然上述解決方案解決了後退按鈕檢測問題,它們不處理刷新頁面。為此,仍然可以使用 window.onbeforeunload:
<code class="js">window.onbeforeunload = function (e) { if (e.preventDefault) { e.preventDefault(); e.returnValue = ''; } }</code>
以上是如何準確偵測 Web 瀏覽器中的後退按鈕點擊,同時避免錯誤觸發?的詳細內容。更多資訊請關注PHP中文網其他相關文章!