Come attivare il cambiamento quando si utilizza il pulsante Indietro con history.pushstate e popstate?

Question

Sono praticamente un principiante quando si parla di js quindi scusami se mi manca qualcosa di veramente semplice.

Fondamentalmente, ho fatto qualche ricerca in utilizzando il history.pustate e popstate e ho fatto così una stringa di query viene aggiunta alla fine dell'URL (?v=images) o (?v=profile) ... (v che significa 'view') utilizzando questo:

var url = "?v=profile" 
var stateObj = { path: url }; 
history.pushState(stateObj, "page 2", url); 

voglio fare in modo che possa caricare contenuto in un div, ma senza ricaricare la pagina che ho fatto usando la funzione .load().

Allora ho usato questo codice:

$(window).bind('popstate', function(event) { 
    var state = event.originalEvent.state; 

in $(document).ready() sezione e poi processato nel giro <script> tag e nessuno ha funzionato.

Non so come farlo in modo che il contenuto cambi quando uso il pulsante Indietro o almeno lo rende così posso attivare la mia funzione per farlo; e presumo che abbia qualcosa a che fare con l'oggetto stato ?! Non riesco proprio a trovare nulla online che spieghi chiaramente il processo.

Se qualcuno potesse aiutarmi sarebbe fantastico e grazie in anticipo a chiunque lo faccia!

Answer 1

Il popstate contiene solo uno stato quando ce n'è uno.

Quando si va in questo modo:

1. pagina iniziale caricata
2. nuova pagina caricata, con lo stato aggiunto tramite pushState
3. pulsante Indietro premuto

allora non c'è stato, perché la pagina iniziale è stata caricata regolarmente, non con pushState. Di conseguenza, l'evento onpopstate viene generato con un state di null. Quindi, quando è null, significa che la pagina originale deve essere caricata.

Si potrebbe attuarlo in modo tale che history.pushState si chiamerà coerenza e avete solo bisogno di fornire una funzione di cambiamento di stato in questo modo: Click here for jsFiddle link

function change(state) { 
    if(state === null) { // initial page 
     $("div").text("Original"); 
    } else { // page added with pushState 
     $("div").text(state.url); 
    } 
} 

$(window).on("popstate", function(e) { 
    change(e.originalEvent.state); 
}); 

$("a").click(function(e) { 
    e.preventDefault(); 
    history.pushState({ url: "/page2" }, "/page2", "page 2"); 
}); 

(function(original) { // overwrite history.pushState so that it also calls 
         // the change function when called 
    history.pushState = function(state) { 
     change(state); 
     return original.apply(this, arguments); 
    }; 
})(history.pushState); 

Answer 2

Forse non è la soluzione migliore, e forse non soddisfa le vostre esigenze. Ma per me era meglio ricaricare la pagina. Quindi la pagina è coerente e carica tutto secondo la query queruale corrente.

$(document).ready(function() { 
    $(window).on("popstate", function (e) { 
     location.reload(); 
    }); 
});