首頁 >web前端 >js教程 >如何區分後退按鈕點擊與瀏覽器重新載入和其他事件?

如何區分後退按鈕點擊與瀏覽器重新載入和其他事件?

Susan Sarandon
Susan Sarandon原創
2024-10-22 12:42:02263瀏覽

How to Distinguish Back Button Clicks from Browser Reloads and Other Events?

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

偵測瀏覽器中的後退按鈕點擊,尤其是在利用AJAX 的Web 應用程式中,這是一個挑戰。雖然 window.onbeforeunload 事件通常用於此目的,但它也會在瀏覽器重新加載等其他操作上觸發,這是不希望的。

解決方案:

幸運的是,有一個優雅的解決方案,可以有效地區分後退按鈕點擊與重新加載和其他事件。以下是解決此問題的修改後的程式碼:

<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 clicks here
    };
  } else {
    // For older browsers that don't support `pushState`
    var ignoreHashChange = true;
    window.onhashchange = function () {
      if (!ignoreHashChange) {
        ignoreHashChange = true;
        window.location.hash = Math.random();
        // Handle back button clicks here
      } else {
        ignoreHashChange = false;
      }
    };
  }
};</code>

此解決方案適用於 Chrome 和 Firefox,提供更精確的方法來偵測後退按鈕點擊,同時避免潛在的錯誤觸發。

以上是如何區分後退按鈕點擊與瀏覽器重新載入和其他事件?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn