Come dire se il pulsante avanti o indietro è stato premuto usando l'evento popstate

Question

Ho fatto qualche ricerca e sembra che l'evento popstate si attivi ogni volta che la cronologia è cambiata, ma non sembra essere un costruito in modo da determinare se l'utente ha fatto clic sul pulsante Indietro o sul pulsante Avanti nel browser.

Il mio caso d'uso è che quando si torna indietro nella cronologia o in avanti nella cronologia, ho delle animazioni direzionali che si verificano quando si transizionano percorsi in un'applicazione Ajax. Devo determinare se l'utente sta andando indietro o in avanti, quindi le animazioni hanno senso. È un peccato che l'evento popstate non supporti la direzione dell'evento.

Vorrei anche ricordare che la mia applicazione è un'applicazione AngularJS nel caso in cui ci sia una risposta angolare specifica, anche se una soluzione javascript più generica sarebbe ottimale.

Answer 1

Non sono sicuro di quale sia la comprensione corretta, ma la mia comprensione dello stato di stampa HTML5 è diversa.

Il supporto push-state consente semplicemente di acquisire le modifiche nell'URL del browser che altrimenti verrebbero inviate come richiesta a un server (il proprio o di qualcun altro). Lo scopo non è quello di darti "avanti" e "indietro" eventi, ma più come eventi generali di "cambio di posizione". Quindi è compito della tua app controllare l'URL e capire dove sta andando l'utente.

Pensateci in questo modo: cosa succede se l'utente ha fatto clic su un collegamento nella vostra app che si desidera gestire con javascript? Avresti una configurazione di gestori di eventi che catturerebbe il clic e manipolerebbe la tua app in qualche modo. Quindi, fare clic su "indietro" o "avanti" è come fare clic su un collegamento, ma tutto ciò che ottieni è l'URL che l'utente sta tentando di visualizzare - non c'è alcun collegamento a cui associare gli eventi.

Quindi, come fai a sapere cosa sta tentando di fare l'utente? È possibile gestire lo stato utilizzando le variabili globali o qualsiasi altro modo in cui si possa arrivare. Se si desidera ridurre la duplicazione del codice, è possibile gestire tutti gli del routing delle app utilizzando gli URL. Quindi il tuo gestore di clic non si collegherebbe a un particolare link (o una serie di link), invece potresti acquisire le modifiche nell'URL del browser e quindi determinare come gestire il nuovo URL.

BackboneJS fa questo utilizzando un oggetto router in cui percorsi specifici sono legati a funzioni di router specifici, che ha fissato lo stato delle app un modo particolare, ad esempio:

MyAppRouter = Backbone.Router.extend({ 
    routes: { 
     'home': 'setupHomeScreen', 
     'recipes': 'setupRecipesList', 
     'recipes/:id': 'setupRecipeScreen' 
    }, 

    setupHomeScreen: function() { 
     // ... 
    }, 

    setupRecipesList: function() { 
     // ... 
    }, 

    setupRecipeScreen: function(id) { 
     // ... 
    }, 

    // ... 

}); 

Chiedo scusa per il codice Backbone su un angolare domanda. Sto ancora imparando The Angular Way, e provenendo da uno sfondo Backbone che ha formato la mia comprensione dello stato di avanzamento.

Per rispondere alla tua domanda

Se le vostre opinioni formano una sorta di gerarchia o ordine, è possibile memorizzare che in una variabile globale. Forse decidi di inventare ID per ogni vista, e quindi ogni volta che lo stato del browser cambia, devi inserire quegli ID su un array.

var viewHistory = []; 

// ... they visited the recipe list. push it into the history 
viewHistory.push('recipeList'); 

// ... they visited a particular recipe. push it into the history 
viewHistory.push('recipe:13'); 

// ... they clicked the "back" button. we know from the URL that they want 
// the recipeList, but we don't know if they're trying to go forward or back. 
var nextView = 'recipeList'; 
if (viewHistory.indexOf(nextView) > 0) { 
    // *** Back Button Clicked *** 
    // this logic assumes that there is never a recipeList nested 
    // under another recipeList in the view hierarchy 
    animateBack(nextView); 

    // don't forget to remove 'recipeList' from the history 
    viewHistory.splice(viewHistory.indexOf(nextView), viewHistory.length); 
} else { 
    // *** They arrived some other way *** 
    animateForward(nextView); 
}