Jak wywołać zmianę przy użyciu przycisku Wstecz z historia.pushstate i popstate?

Question

Jestem prawie początkującym, jeśli chodzi o js, ​​więc przykro mi, jeśli brakuje mi czegoś naprawdę prostego.

Zasadniczo Robiłem rozeznanie w użyciu history.pustate i popstate i zrobiłem to tak ciągiem znaków zapytania zostanie dodany do końca URL (?v=images) lub (?v=profile) ... (v czyli „widok”) za pomocą tego:

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

Chcę uczynić go tak mogę załadować zawartość do div ale bez przeładowania strony, które zrobiłem przy użyciu funkcji .load().

I wtedy używany ten kod:

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

w $(document).ready() sekcji, a później próbował ciągu zaledwie <script> tagów i nie działało.

Nie wiem, jak to zrobić, aby zawartość zmieniła się, gdy użyję przycisku Wstecz lub przynajmniej sprawi, że będę mógł uruchomić moją własną funkcję; i zakładam, że ma coś wspólnego z obiektem państwowym ?! Po prostu nie mogę znaleźć niczego w Internecie, co wyraźnie wyjaśnia proces.

Jeśli ktoś mógłby mi pomóc, byłoby to niesamowite i z góry dziękuję każdemu, kto to potrafi!

Answer 1

Tylko popstate zawiera stan, gdy taki występuje.

Kiedy to idzie tak:

1. początkowa Strona załadowana
2. nową stronę załadowane z stan dodany przez pushState
3. z powrotem wciśnięty

wtedy nie ma państwa, ponieważ strona początkowa była ładowana regularnie, a nie z pushState. W rezultacie zdarzenie onpopstate jest uruchamiane z state z null. Więc jeśli jest to null, oznacza to, że strona oryginalna powinna zostać załadowana.

Można zaimplementować to w taki sposób, history.pushState będzie nazywany konsekwentnie i trzeba tylko zapewnić funkcję zmiany stanu takiego: 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

Może to nie jest najlepsze rozwiązanie, a może to nie wyczerpuje twoich wymagania. Ale dla mnie najlepiej było po prostu odświeżyć stronę. Więc strona jest spójna i ładuje wszystko zgodnie z aktualnym zapytaniem.

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