2012-01-23 9 views
45

Zajmuję się tworzeniem strony internetowej, gdzie w zależności od następnych lub wstecznych działań, które wykonuję animację korespondencyjną, problem pojawia się podczas używania parametru pushstate. Kiedy otrzymam powiadomienie, skąd mam wiedzieć, czy użytkownik kliknął wstecz lub przesłał przyciski historii za pomocą interfejsu API Pushstate ?, czy też muszę coś zaimplementować?Jak mogę odzyskać, jeśli zdarzenie typu popstate pochodzi z działania wstecz lub w przód przy użyciu parametru push w formacie HTML5?

+0

Zdarzenie popstate mówi "proszę zmień na ten stan". Wygląda na to, że zakłada, że ​​wiesz, w jakim jesteś stanie, a zatem, co musisz zrobić, aby zmienić stan. – Neil

+0

Problem polega na tym, że historia jest stosem, więc jeśli mam listę i idę do przodu, do przodu, do przodu, do tyłu, do przodu, do tyłu, do przodu, a lista jest: [1,2,3,4,5] historia będzie: [1,2,3,4,3,4,3,4]. W liczbach jest łatwo, ale w przypadku adresów URL nie jest tak łatwo wiedzieć, który URL jest następny, a który poprzedni. – Davsket

+0

Poniższy komentarz do bennedich pomógł mi bardzo. Przydałoby się go zaakceptować, aby skuteczniej pomagać także innym. –

Odpowiedz

51

Musisz to wdrożyć samodzielnie, co jest dość łatwe.

  • Podczas wywoływania pushState należy podać obiekt danych o unikalnym inkrementującym id (uid).
  • Po wywołaniu onpopstate handler; sprawdź stan uid przed stałą zmienną zawierającą ostatni stan uid.
  • Zaktualizuj stałą zmienną za pomocą bieżącego stanu UID.
  • Wykonaj różne czynności w zależności od tego, czy stan uid był większy, czy mniejszy od ostatniego stanu uid.
+11

Działa to dobrze, gdy hierarchia strony/widoku jest jasno zdefiniowana i zawsze jest prawdą, że określona strona przychodzi po drugiej. Gdy nawigacja może być bardziej dynamiczna, nie można polegać na inkrementującym identyfikatorze UID. Rozwiązałem to za pomocą sessionStorage, aby zachować stos ostatnich X stron. Następnie, w zdarzeniu popstate, możesz sprawdzić stos z sessionStorage, aby sprawdzić, czy nowy adres URL strony jest taki sam, jak adres URL strony N-2. Użyj sessionStorage zamiast normalnej zmiennej, więc jest to utrzymywane pomiędzy granicami strony. – frontendbeauty

+12

@frontendbeauty Myślę, że powinieneś opublikować swoją propozycję jako odpowiedź za pomocą fragmentu kodu. – andi

+1

ponadto, zamiast sprawdzać, czy wartość jest większa/mniejsza, można napisać menedżera zmiany stanu, który sprawdza identyfikator, aby zobaczyć, jaki jest obecny stan i do jakiego stanu się on przeprowadza, a następnie wykonać odpowiednią animację –