HTML5: Aggiorna pagina quando popstate viene licenziato

Question

Ho un Formulario di ricerca ajax come:

url:/ricerca/

entra

=> User una ricerca termine e clic su un pulsante

= > la ricerca è fatta e mostra i risultati via ajax in un div sulla pagina

Ma: voglio anche che l'utente sia in grado di copiare & incollare l'URL agli amici e navigare attraverso le ricerche precedenti. Così, quando si attiva la ricerca, a cambiare l'URL nel browser AddressBar da

/ricerca/

a

/ricerca/q = yourkeyword

utilizzando:?

window.history.pushState("", "Search for "+keyword, "/search/?q="+keyword); 

Cambia l'URL nella barra degli indirizzi del browser in/search /? Q = yourkeywords e funziona correttamente.

Ora, premendo il pulsante Indietro, la barra degli indirizzi del browser si sta visualizzando di nuovo/search /, che va bene. Ma il contenuto della pagina non viene ricaricato, mostra comunque i risultati di/search /? Q = yourkeyword.

così ho aggiunto:

window.addEventListener("popstate", function(e) 
{ location.reload(); 
}); 

È questo il modo corretto? Funziona perfettamente con i browser desktop come FF e Chrome, ma per esempio in iOS, l'evento popstate viene attivato al primo caricamento di searchform su/search /, con conseguente caricamento ininterrotto di quella pagina.

Qual è il modo giusto per farlo?

Answer 1

Il mio suggerimento:

window.location.href = window.location.href; 

non l'ho provato, ma penso che farà quello che vuoi.

Answer 2

La soluzione più semplice è impostare una variabile globale quando si utilizza pushState. Quindi, nel tuo gestore onpopstate, controlla solo se è impostato. Es .:

window.historyInitiated = true; 
window.history.pushState("", "Search for "+keyword, "/search/?q="+keyword); 
... 
window.addEventListener("popstate", function(e) { 
    if (window.historyInitiated) { 
    window.location.reload(); 
    } 
});