Javascript/jQuery僅在瀏覽器後退/前進按鈕點擊時檢測到散列更改

Question

僅在瀏覽器歷史更改（即後退或前進按鈕）上檢測散列更改是否可能？

我見過onbeforeunload事件，但這一事件不會觸發哈希變化，因爲窗口沒有卸載。

散列變化事件顯然會在任何時候散列發生變化時觸發。任何修復？最好沒有插件。我看過jQuery歷史插件，但正在尋找最簡單的解決方案。

感謝您的幫助。

Answer 1

看看在window.onhashchange事件。

但是，它目前在所有瀏覽器中都不支持。看看BA jQuery Hash Change Plugin here。如果你最終選擇使用插件，它可能會起作用。

我希望這有助於！

Answer 2

你不能用哈希或者甚至用HTML5 History API來做到這一點。沒有與用戶點擊後退或前進按鈕完全相關的事件。除非在客戶端計算機上安裝某種擴展或其他方法是可行的，否則您可能需要採用不同的方法解決原始問題。

Answer 3

我有一個不同的方法建議。可以說你有一個鏈接去了一些頁面（但使用AJAX而不刷新）。點擊該鏈接時，可以將散列更改爲任何你喜歡的。現在，當用戶點擊後退按鈕時，哈希變回原來在用戶點擊鏈接之前的狀態......但是您可以做的是檢查點擊事件是否在鏈接或按鈕上觸發（或者其他選擇器/事件你想檢查）。如果它被解僱了，你就知道這個請求來自點擊頁面本身。如果沒有發現要檢查的事件，則您知道點擊來自後退或前進按鈕。

你可以做的另一件事是一個後綴追加到散時，它改變（基於你的射擊任何事件的檢查的前進或後退按鈕）。所以如果你有一個#pageTitle的散列，你可以把它變成#pageTitle_chrome來表明這個散列是從後退按鈕或者前進按鈕改變的。

然後，當你檢查你的哈希值，你可以只是看它是否包含_chrome檢測到它是什麼樣的哈希值的變化。

Answer 4

我認爲克里斯問的是一種方式，因爲當你通過瀏覽器歷史記錄（後退/前進）按鈕導航window.onhashchange事件才起作用。

回答=沒有...但你可以把一個if statment的功能。
我這樣做：

$('.nav').click(function() { //on the onclick event for your nav add a class 
    $(this).addClass('navClick'); // before you change the hash. 
    window.location.hash = 'state' + $(this).html(); 
}); 
function getLocationHash() { 
    return window.location.hash.substring(1); 
} 
window.onhashchange = function(e) { // if element does not exist with your 
    if ($('.navClick').length == 0) { // 'navClick' class then check hash 
    switch(getLocationHash()) { 
     case 'state1': 
     execute code block 1; 
     break; 
     case 'state2': 
     execute code block 2; 
     break; 
     default: 
     code to be executed if different from case 1 and 2; 
    } 
    } else {       // removes the class if it does 
    $('.navClick').removeClass('navClick'); 
    } 
}; 

我做了my site

這完全是動態變化的內容類似的東西。我仍然使用window.location.hash來跟蹤站點狀態。如果您瀏覽網站，然後開始使用後退前進按鈕進行瀏覽，那麼網站位於歷史記錄中後，它將動態更改狀態，就好像用戶實際上點擊了導航欄，而不需要在之後重新加載頁面。如果您正在使用歷史記錄導航，它只會檢查散列。

Answer 5

每當我的導航被觸發時，我最終都會標記一個標記，如果標記被標記了，hashChange事件會忽略它，否則它會像處理後退/前進事件一樣處理它。