Rilevatore di clic sul pulsante back del browser JavaScript o jQuery

Question

Qualcuno potrebbe condividere esperienza/codice in che modo è possibile rilevare il clic del pulsante Indietro del browser (per qualsiasi tipo di browser)?

Abbiamo bisogno di soddisfare tutti i browser che non supporta HTML5

Answer 1

E 'disponibile nelle API di HTML5 Storia. L'evento si chiama 'popstate'

Answer 2

ci sono molti modi in cui è possibile rilevare se l'utente ha fatto clic sul pulsante Indietro. Ma tutto dipende da quali sono i tuoi bisogni. Prova ad esplorare i link qui sotto, dovrebbero aiutarti.

Rilevare se tasto premuto dall'utente "Back" a pagina corrente:

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

rilevare se la pagina corrente viene visitato dopo aver premuto il tasto "Back" sul precedente ("Forward ") pagina:

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

Answer 3

L'evento 'popstate' funziona solo quando si preme qualcosa prima. Quindi devi fare qualcosa di simile:

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.'); 
    }); 

    } 
}); 

Per il browser retrocompatibilità vi consiglio: history.js

Answer 4

trovato questo per lavorare bene navigatore croce e mobile back_button_override.js.

(Aggiunto un timer per 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

disattivare il pulsante URL seguente funzione

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

Nel mio caso sto usando jQuery .load() per aggiornare DIV in una SPA (singolo pagina [web] app).

Essendo nuovo di lavorare con $(window).on('hashchange', ..) listener di eventi, questo si è rivelato impegnativo e ha preso un po 'di incidere su. Grazie alla lettura di molte risposte e alla ricerca di diverse varianti, finalmente abbiamo capito come farlo funzionare nel modo seguente. Per quanto posso dire, sembra molto stabile finora.

In sintesi, la variabile globalCurrentHash deve essere impostata ogni volta che si carica una vista.

Poi, quando $(window).on('hashchange', ..) listener di eventi viene eseguito, esso controlla il seguente:

• Se location.hash ha lo stesso valore, significa Andando avanti
• Se location.hash ha valore diverso, significa Going Back

Realizzo utilizzando global var s non è la soluzione più elegante, ma fare cose con OO in JS mi sembra complicato finora. Proposte di miglioramento/affinamento certamente apprezzate

---

impostare:

1. Definire una var globale:

var globalCurrentHash = null; 

2. Quando si chiama .load() per aggiornare il DIV, aggiornare il var globale così:

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

3. A pagina Installazione semplice e rapida l'ascoltatore a controllare la var globale per vedere se viene premuto il pulsante Indietro:

   $(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

In caso di HTML5, questo farà il trucco

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