Statechange jest uruchamiane za każdym razem, gdy robię stan push

Question

Używam history.js do obsługi przycisku Wstecz. W history.js statechange jest uruchamiany za każdym razem, gdy robię pushstate. Czemu?

Answer 1

Według tego discussion on github, to spodziewane zachowanie history.js

This pull request twierdzi, że zmodyfikowane history.js być bardziej inline z W3C specyfikacji.

Answer 2

Chciałem dodać, tak jest oczekiwane zachowanie History.js. W tym samym czasie są more discussions, które krytykują to zachowanie, ponieważ nie jest to standard W3C i powoduje pewne zamieszanie.

Krótko mówiąc, aby odpowiedzieć na pytanie: W funkcji History.js pushState() jest wywołanie do statechange na końcu.

Upside tego rozwiązania jest to, że możesz po prostu zmienić (wypchnąć) swój nowy stan i pozwolić funkcji onstatechange() - obsłużyć przejście. Downside jest to, że nie jesteś w stanie obsłużyć wyjątków/lub zapisać ich w module obsługi zdarzenia onstatechange.

Ja osobiście wolę sposób obchodzenia się z tym W3C, ponieważ można rozróżnić przyciski wstecz/do przodu i pushState. W History.js opiekunowie pracują na wewnętrznym rozwiązania flagi, który pozwala na zmianę tego zachowania:

zauważyć, jak powyższe połączenia [pushState-rozmowy] Zdarzenia stateChange spust, jeśli z jakiegoś powodu nie chcesz aby tak się stało potem wewnątrz uchwytu stateChange można użyć następujących:

if (History.getState().internal) { return; } 

* ta funkcja jest obecnie w fazie rozwoju i może być używany tylko z „dev” wersją History.js! Nadzieję, że to pomoże kilka innych osób w przyszłości :)

Answer 3

Po próbując tego dokonać na jeden dzień teraz, w końcu znalazłem rozwiązanie tutaj: https://github.com/browserstate/history.js/issues/47#issuecomment-25750285

Kod jest cholernie proste, co następuje cytat z link:

po naciśnięciu swój stan

History.pushState({ 
    _index: History.getCurrentIndex(), 
    someData: ... 
}, someTitle, someUrl); 

a następnie w przypadku wiązania

History.Adapter.bind(window, 'statechange', function() { 
    var currentIndex = History.getCurrentIndex(); 
    var internal = (History.getState().data._index == (currentIndex - 1)); 
    if (!internal) { 
     // your action 
    } 
});