HTML Academy · Lekcja

Zdarzenie popstate

Reagowanie na nawigację wstecz i do przodu w przeglądarce

Zdarzenie popstate to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Działanie zdarzenia popstate

Zdarzenie popstate jest wywoływane na obiekcie window, gdy użytkownik porusza się po historii (przy użyciu przycisków Wstecz lub Dalej albo wywołania history.back w JavaScript). Dzięki niemu SPA może ponownie wyrenderować właściwy widok w odpowiedzi na nawigację zainicjowaną przez przeglądarkę.

Kiedy jest wywoływane

popstate jest wywoływane po kliknięciu przycisku Wstecz lub Dalej oraz po wywołaniu history.back(), history.forward() i history.go(n). NIE jest wywoływane po ręcznym wywołaniu pushState/replaceState — są to aktualizacje programowe, o których strona już wie.

window.addEventListener("popstate", (e) => {
  console.log("Navigated to", location.pathname, "state:", e.state);
  renderPage(location.pathname);
});

Właściwość state

Właściwość state zdarzenia zawiera obiekt stanu przekazany do pushState/replaceState dla wpisu, do którego nastąpiła nawigacja. Należy używać go do przywracania stanu interfejsu (aktywnej karty, pozycji przewinięcia), który nie jest przechowywany w adresie URL.

Odczytywanie nowego URL

Pasek adresu jest już zaktualizowany w momencie wywołania popstate. Należy odczytać location.pathname, location.search i location.hash, aby znaleźć nowy URL. W połączeniu ze stanem są to wszystkie informacje potrzebne do wyrenderowania widoku docelowego.

Początkowe wczytanie strony

popstate NIE jest wywoływane podczas początkowego wczytywania strony — tylko podczas nawigacji. Przy uruchamianiu należy wyrenderować początkowy widok na podstawie location, a następnie pozwolić, aby popstate obsługiwało kolejne nawigacje. Bez tego początkowa strona będzie pusta po powrocie do niej podczas pierwszej nawigacji wstecz.

// Initial render
renderPage(location.pathname);
// Future navigation
window.addEventListener("popstate", () => renderPage(location.pathname));

hashchange a popstate

W przypadku routingu opartego wyłącznie na haszach (adresy URL takie jak /#/about) zdarzenie hashchange jest wywoływane po zmianie hasza. popstate jest również wywoływane przy zmianach ścieżki. Współczesne SPA używają History API i popstate; routing oparty na haszach jest rozwiązaniem starszego typu.

Przechwytywanie kliknięć

Aby zwykłe kliknięcie elementu <a> wywoływało nawigację po stronie klienta, należy przechwycić kliknięcie, wywołać preventDefault, a następnie wywołać pushState + renderPage. Należy sprawdzić klawisze modyfikujące (kliknięcie z Cmd/Ctrl w celu otwarcia nowej karty) i przekazać takie kliknięcia do domyślnej obsługi.

document.addEventListener("click", (e) => {
  const a = e.target.closest("a");
  if (!a || a.target || e.metaKey || e.ctrlKey) return;
  e.preventDefault();
  history.pushState(null, "", a.href);
  renderPage(location.pathname);
});

Przywracanie pozycji przewinięcia

Przeglądarki próbują automatycznie przywracać pozycję przewinięcia podczas nawigacji wstecz, ale w SPA jest to zawodne, ponieważ zawartość jest renderowana asynchronicznie. Należy zapisywać pozycję przewinięcia w stanie pushState i przywracać ją w popstate: window.scrollTo(0, e.state?.scroll ?? 0).

Zastrzeżenie dotyczące renderowania asynchronicznego

Jeśli renderPage pobiera dane asynchronicznie, URL zostaje zaktualizowany przed pojawieniem się zawartości. Należy wyświetlić stan ładowania, a następnie wyrenderować zawartość. Trzeba unikać sytuacji wyścigu, w której użytkownik klika Wstecz podczas pobierania, a wynik anulowanego pobierania nadpisuje nowy widok.

Routery frameworków

React Router, router Vue i router SvelteKit opakowują History + popstate. Nawet bez frameworka podstawowy mechanizm jest taki sam — należy nasłuchiwać popstate, przechwytywać kliknięcia odnośników i wywoływać pushState. Gdy narzut ma znaczenie, można napisać własny router w około 50 wierszach czystego JavaScriptu.

Częsty problem: wycieki pamięci

Konfiguracja każdego widoku może dodawać detektory zdarzeń i timery. Bez jawnego sprzątania po zmianie widoku (w popstate lub w opakowaniu pushState) detektory się gromadzą i z czasem pogarszają wydajność. Należy śledzić subskrypcje poszczególnych widoków za pomocą AbortController i przerywać je przy zmianie widoku.

Sprawdzenie wiedzy

Dlaczego zdarzenie popstate NIE jest wywoływane po samodzielnym wywołaniu history.pushState?

Podsumowanie

popstate jest wywoływane podczas nawigacji za pomocą przycisków Wstecz i Dalej w przeglądarce, udostępniając zapisany stan oraz nową lokalizację. Nie jest wywoływane po pushState/replaceState (kod już o tym wie) ani podczas początkowego wczytywania strony (widok należy wyrenderować ręcznie). Należy przechwytywać kliknięcia odnośników podczas nawigacji w SPA, zapisywać pozycję przewinięcia w stanie i usuwać detektory przy zmianie widoku, aby zapobiegać wyciekom.

Często zadawane pytania

Czy lekcja „Zdarzenie popstate” jest bezpłatna?

Tak — pełny tekst „Zdarzenie popstate” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Zdarzenie popstate”?

Reagowanie na nawigację wstecz i do przodu w przeglądarce Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Zdarzenie popstate”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do HTML Academy