HTML5: Odśwież stronę kiedy popstate wypala

Question

Mam ajax Formularz wyszukiwawczy jak:

url:/search/

=> Użytkownik wchodzi do wyszukiwarki określony i kliknie przycisk

= > Wyszukiwanie jest zakończone i pokazuje wyniki przez ajax w div na stronie

Ale: Chcę również, aby użytkownik mógł skopiować adres URL do znajomych i przejść przez poprzednie wyszukiwania. Więc gdy wyzwalanie wyszukiwanie, zmienić adres URL w przeglądarkach adresowym z

/search/

do

/Szukaj/q = yourkeyword

używając:

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

Spowoduje to zmianę adresu URL w pasku adresu przeglądarki na/search /? Q = yourkeywords i działa poprawnie.

Teraz, naciskając przycisk Wstecz, pasek adresu przeglądarki wyświetla się ponownie/szukaj /, co jest w porządku. Ale treść strony nie jest ponownie ładowana, nadal pokazuje wyniki z/search /? Q = twoje słowo kluczowe.

więc dodałem:

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

Czy to jest prawidłowy sposób? Działa dobrze w przeglądarkach komputerowych, takich jak FF i Chrome, ale na przykład w iOS zdarzenie typu popstate jest uruchamiane przy pierwszym ładowaniu searchform na/search /, co powoduje niekończące się ponowne ładowanie tej strony.

Co to jest właściwy sposób?

Answer 1

Moja sugestia:

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

nie testowałem, ale myślę, że będzie to robić co chcesz.

Answer 2

Najprostszym rozwiązaniem jest ustawienie zmiennej globalnej podczas korzystania z pushState. Następnie, w swoim lokalnym programie obsługi wystarczy sprawdzić, czy to jest ustawione. Np .:

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