HTML Academy · Урок

Событие popstate

Реагируйте на переходы браузера назад и вперёд

«Событие popstate» — бесплатный урок HTML Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Что делает событие popstate

Событие popstate срабатывает на window, когда пользователь перемещается по истории (назад, вперёд или с помощью вызова JavaScript history.back). Это позволяет SPA заново отобразить правильное представление в ответ на навигацию, инициированную браузером.

Когда оно срабатывает

Событие popstate срабатывает при нажатии кнопок «Назад» и «Вперёд», вызовах history.back(), history.forward() и history.go(n). Оно NOT срабатывает при ручном вызове pushState/replaceState — это программные обновления, о которых страница уже знает.

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

Свойство state

Свойство state события содержит объект состояния, переданный вами в pushState/replaceState для записи, к которой выполняется переход. Используйте его для восстановления состояния интерфейса (открытой вкладки, позиции прокрутки), которое не хранится в адресе.

Чтение нового адреса

Когда срабатывает popstate, адресная строка уже обновлена. Прочитайте location.pathname, location.search и location.hash, чтобы получить новый адрес. Вместе с состоянием это вся информация, необходимая для отображения представления назначения.

Начальная загрузка страницы

popstate НЕ срабатывает при начальной загрузке страницы — только при навигации. При запуске отобразите начальное представление на основе location, а затем передайте последующие переходы обработчику popstate. Без этого начальная страница окажется пустой, когда после первого перехода назад будет достигнута.

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

hashchange и popstate

При маршрутизации только на основе хэша (с адресами вроде /#/about) событие hashchange срабатывает при изменении хэша. Событие popstate также срабатывает при изменениях пути. Современные SPA используют API истории и popstate; маршрутизация по хэшу считается устаревшей.

Перехват нажатий

Чтобы обычное нажатие на <a> запускало навигацию на стороне клиента, перехватите нажатие, вызовите preventDefault, а затем pushState и renderPage. Проверяйте клавиши-модификаторы (нажатие с Cmd/Ctrl для открытия новой вкладки) и передавайте такие действия стандартному поведению браузера.

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);
});

Восстановление позиции прокрутки

Браузеры пытаются автоматически восстановить позицию прокрутки при переходе назад, но в SPA это ненадёжно, поскольку содержимое отображается асинхронно. Сохраняйте прокрутку в состоянии pushState и восстанавливайте её в popstate: window.scrollTo(0, e.state?.scroll ?? 0).

Ограничение асинхронного отображения

Если renderPage асинхронно получает данные, адрес обновляется до появления содержимого. Покажите состояние загрузки, затем выполните отображение. Избегайте состояний гонки, при которых пользователь нажимает «Назад» во время получения данных, а результат отменённого запроса перезаписывает новое представление.

Маршрутизаторы фреймворков

Маршрутизаторы React Router, Vue Router и SvelteKit оборачивают History и popstate. Даже без фреймворка базовый механизм тот же — слушать popstate, перехватывать ссылки и вызывать pushState. Когда накладные расходы важны, можно написать собственный маршрутизатор примерно на 50 строках обычного JavaScript.

Распространённая ошибка: утечки памяти

Настройка каждого представления может добавлять обработчики событий и таймеры. Без явного удаления при смене представления (в popstate или обёртке для pushState) обработчики накапливаются и со временем ухудшают производительность. Отслеживайте подписки каждого представления с помощью AbortController и прерывайте их при смене представления.

Проверка знаний

Почему событие popstate НЕ срабатывает, когда вы самостоятельно вызываете history.pushState?

Итоги

popstate срабатывает при переходах браузера назад и вперёд, предоставляя доступ к сохранённому состоянию и новому адресу. Оно не срабатывает при pushState/replaceState (ваш код уже знает об изменении) или при начальной загрузке страницы (отобразите представление вручную). Перехватывайте нажатия на ссылки для навигации SPA, сохраняйте позицию прокрутки в состоянии и удаляйте обработчики при смене представления, чтобы предотвратить утечки.

Часто задаваемые вопросы

Урок «Событие popstate» бесплатный?

Да — полный текст урока «Событие popstate» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Событие popstate»?

Реагируйте на переходы браузера назад и вперёд Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Событие popstate»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML Academy