Kod

Jak zarządzać przyciskiem Wstecz za pomocą JavaScript

Jednym z głównych problemów z aplikacjami opartymi na JavaScript jest to, że przerywają przycisk Wstecz. Jeśli zaktualizujesz treść na stronie za pomocą JavaScript, zamiast ładowania nowej strony z serwera, wpis nie zostanie zapisany w historii przeglądarki; więc gdy użytkownik kliknie przycisk Wstecz, oczekując powrotu do poprzedniego stanu, zamiast tego trafi na poprzednią stronę.

Przeciąganie i upuszczanie to świetny sposób na interakcję użytkowników z aplikacjami internetowymi. Jednak zyski z użyteczności zostaną utracone, jeśli po spędzeniu czasu w aplikacji użytkownik kliknie przycisk Wstecz, oczekując powrotu do strony i powrotu do ekranu początkowego. W tym artykule "Hello! HTML5 i CSS3 "autor Rob Crowther pokazuje, jak używać interfejsu API historii HTML5, aby uniknąć tego losu.

Problem można łatwo wykazać. Potrzebujesz tylko funkcji, która aktualizuje stronę w odpowiedzi na aktywność użytkownika: 

var times = 0;function doclick() {times++;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}

i trochę znaczników: 

Click Me
Recorded 0 clicks

W rzeczywistości twoja strona robiłaby coś bardziej skomplikowanego, na przykład pobieranie nowej treści z serwera za pośrednictwem AJAX, ale prosta aktualizacja wystarczy, by zademonstrować tę koncepcję. Zobaczmy, co się stanie, gdy użytkownik wejdzie na stronę.

  1. Użytkownik zaczyna na swojej stronie głównej i decyduje się odwiedzić niesamowitą aplikację Click Me, o której słyszeli.
  2. Wpisują adres URL lub podążają za linkiem z wiadomości e-mail, aby przejść do strony "Kliknij mnie".
  3. Po kilku sekundach przyjemnej interakcji stan strony zmienił się kilka razy.
  4. Ale gdy użytkownik kliknie przycisk Wstecz w przeglądarce, odkryje, że zamiast wracać do poprzedniego stanu strony, przeskakują na swoją stronę główną.

Funkcja doclick () może zostać zaktualizowana, aby skorzystać z interfejsu API historii. Za każdym razem, gdy strona jest aktualizowana, ustawi także location.hash: 

function doclick() {times++;location.hash = times;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}
  1. Użytkownik przybywa na stronę Click Me, jak poprzednio.
  2. Zauważ, że teraz adres URL jest aktualizowany po każdym kliknięciu - "#" pojawiło się na końcu.
  3. Kliknięcie przycisku Wstecz powoduje teraz powrót lokalizacji do numeru 2, co wskazuje, że stany stron zostały pomyślnie dodane do historii. Należy jednak pamiętać, że kliknięcie przycisku Wstecz nie powoduje automatycznego powrotu strony do poprzedniego stanu.

Aktualizowanie stanu strony

Aktualizacja historii jest tylko częścią problemu; musisz również móc zaktualizować stan strony, aby pasował do stanu w historii.

Ponieważ to Ty zarządzasz historią, to Ty zarządzasz jej stanem. Aby zaktualizować stronę w odpowiedzi na zmianę location.hash, możesz wysłuchać zdarzenia hashchange: 

function doclick() {times++;location.hash = times;}window.onhashchange = function() {if (location.hash.length > 0) {times = parseInt(location.hash.replace('#',''),10);} else {times = 0;}document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}

Funkcja doclick () jest teraz odpowiedzialna tylko za aktualizację zmiennej time i zmianę hasza. Zdarzenie hashchange znajduje się na obiekcie okna; kiedy to nastąpi, sprawdzasz, czy hash istnieje. W prawdziwej aplikacji chcesz również sprawdzić, czy ma poprawną wartość. Następnie ustaw wartość razy, aby była liczbą w haszdzie. Na koniec aktualizujesz dokument, aby odzwierciedlić poprawny stan strony. Spójrzmy na ten nowy kod:

  1. Tak jak poprzednio, skrót w adresie URL jest aktualizowany, gdy użytkownik kliknie.
  2. Ale teraz, po kliknięciu przycisku Wstecz, uruchamiana jest funkcja onhashchange, a stan strony jest resetowany w celu dopasowania do adresu URL.

Używanie location.hash

Właściwość location.hash i skojarzone zdarzenie wymiany są przydatne, jeśli chcesz oznaczyć konkretne widoki aplikacji i zezwolić użytkownikowi na nawigację między nimi. Google Mail korzysta z tego podejścia, umożliwiając nawigację między skrzynką odbiorczą (#inbox), kontaktami (# kontakty) i innymi widokami - jeśli masz konto Gmail, spójrz na to, co stanie się z adresem URL podczas nawigowania po różnych stronach i następnie kliknij z powrotem.

Ale jeśli chodzi o informacje o stanie, hash pozwala tylko przechowywać ciąg znaków. Można zakodować obiekt bardziej złożony, ale URL szybko stałby się długi i nieporęczny i nie byłby niezapomniany dla użytkowników. Jeśli potrzebujesz bardziej złożonych informacji przechowywanych w ramach historii, lepszym rozwiązaniem byłoby użycie skrótu jako klucza do wyciągnięcia dalszych informacji o stanie z jakiegoś sklepu. Chociaż możesz zastosować własne podejście, HTML5 dostarczył API, aby zrobić to za pomocą metody history.pushState () i zdarzenia popstate. Te metody umożliwiają zapisanie i ponowne załadowanie złożonego obiektu.

Podsumowanie

Dowiedziałeś się, że zarządzanie historią przeglądarki pozwala na zachowanie przycisku Wstecz w bardziej rozsądny sposób w kontekście aplikacji, a interfejs API mikrodanych zapewnia dostęp do uporządkowanych informacji semantycznych w treści strony.

Jakie zastosowania przewiduje ta technika? Czy opracowałeś inną metodę? Daj nam znać w komentarzach.

Wyróżniony obraz / miniatura, wrócić do obrazu przez Shutterstock.

aplikacje javascript Przycisk powrotu cześć html5 i css historia api obrabować