JavaScript或jQuery瀏覽器後退按鈕點擊檢測器

Question

有人可以分享經驗/代碼我們如何檢測瀏覽器後退按鈕點擊（對於任何類型的瀏覽器）？

我們需要迎合不支持HTML5

Answer 1

它是可用的HTML5歷史API中的所有瀏覽器。這個事件被稱爲'popstate'

Answer 2

有很多方法可以檢測用戶是否點擊了後退按鈕。但一切都取決於你的需求。嘗試探索下面的鏈接，他們應該幫助你。

檢測，如果當前頁面上的用戶按下 「返回」 按鈕：

• Is there a way using Jquery to detect the back button being pressed cross browsers
• detect back button click in browser

檢測是否訪問過當前頁面按以往的 「返回」 按鈕後（「前進「）頁碼：

• Is there a cross-browser onload event when clicking the back button?
• trigger event on browser back button click

Answer 3

的如 'popstate' 事件，只有當你之前推東西的作品。所以，你必須做這樣的事情：

jQuery(document).ready(function($) { 

    if (window.history && window.history.pushState) { 

    window.history.pushState('forward', null, './#forward'); 

    $(window).on('popstate', function() { 
     alert('Back button was pressed.'); 
    }); 

    } 
}); 

對於瀏覽器的向後兼容性，我建議：history.js

Answer 4

發現這工作得很好跨瀏覽器和移動back_button_override.js。

（增加了Safari瀏覽器5.0定時器）

// managage back button click (and backspace) 
var count = 0; // needed for safari 
window.onload = function() { 
    if (typeof history.pushState === "function") { 
     history.pushState("back", null, null);   
     window.onpopstate = function() { 
      history.pushState('back', null, null);    
      if(count == 1){window.location = 'your url';} 
     }; 
    } 
} 
setTimeout(function(){count = 1;},200); 

Answer 5

通過以下功能

window.onload = function() { 
    if (typeof history.pushState === "function") { 
     history.pushState("jibberish", null, null); 
     window.onpopstate = function() { 
      history.pushState('newjibberish', null, null); 
      // Handle the 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 FF and IE9 
       // * it does mess with your hash symbol (anchor?) pound sign 
       // delimiter on the end of the URL 
      } 
      else { 
       ignoreHashChange = false; 
      } 
     }; 
    } 
}; 

Answer 6

在我的情況下，我使用jQuery​​在SPA 更新的DIV禁用鏈接按鈕（單次頁面[web]應用程序）。

作爲$(window).on('hashchange', ..)事件監聽器的新手，這一個事實證明是具有挑戰性的，並且花了一些時間進行嘗試。由於閱讀了很多答案並嘗試了不同的變體，最後想出瞭如何使它按照以下方式工作。據我所知，目前看起來很穩定。

總之 - 每次加載視圖時都應該設置變量globalCurrentHash。當$(window).on('hashchange', ..)事件偵聽器運行

然後，檢查以下內容：

• 如果location.hash具有相同的值，這意味着繼續前進
• 如果location.hash有不同的值，則意味着回去

我意識到使用全局變量s並不是最優雅的解決方案，但在JS中做事OO對我來說似乎非常棘手。改進/細化的建議肯定讚賞

---

設置：

1. 定義一個全局變量：

var globalCurrentHash = null; 

當致電​​時更新DIV，更新全局變量還有：

function loadMenuSelection(hrefVal) { 
    $('#layout_main').load(nextView); 
    globalCurrentHash = hrefVal; 
} 

就緒頁面，設置監聽檢查全局變量，看是否被按下後退按鈕：

$(document).ready(function(){ 
    $(window).on('hashchange', function(){ 
     console.log('location.hash: ' + location.hash); 
     console.log('globalCurrentHash: ' + globalCurrentHash); 

     if (location.hash == globalCurrentHash) { 
      console.log('Going fwd'); 
     } 
     else { 

      console.log('Going Back'); 
      loadMenuSelection(location.hash); 
     } 
    }); 

}); 

Answer 7

在HTML5的情況下，這將訣竅

window.onpopstate = function() { 
    alert("clicked back button"); 
}; history.pushState({}, '');