HTML Academy · Урок

pushState и replaceState

Обновляйте URL браузера без полной перезагрузки страницы

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

API истории браузера

API истории браузера позволяет странице изменять URL в адресной строке без полной навигации. В сочетании с отображением на стороне клиента это обеспечивает работу одностраничных приложений, которые ощущаются как обычные приложения, но при этом сохраняют URL, которые можно добавлять в закладки.

pushState

history.pushState(state, "", url) добавляет новую запись в историю браузера. URL в адресной строке обновляется сразу, сетевой запрос не выполняется. Пользователь может вернуться к предыдущей записи с помощью кнопки возврата браузера.

history.pushState({ view: "settings" }, "", "/settings");

Аргумент state

Первый аргумент — произвольные сериализуемые данные, прикреплённые к записи. Позже их можно получить через history.state или в событиях popstate. Используйте их для передачи состояния интерфейса, например открытой вкладки или позиции прокрутки, чтобы при возврате восстановить точно тот же вид.

Аргумент заголовка

Второй аргумент — заголовок записи. На практике все современные браузеры игнорируют его — для изменения заголовка напрямую задайте document.title = "...". По соглашению передавайте пустую строку: это ни на что не влияет.

Аргумент url

Третий аргумент — новый адрес. Относительные адреса разрешаются относительно текущей страницы; новый адрес должен относиться к тому же источнику (для другого источника возникает SecurityError). Браузеры не загружают этот адрес — pushState лишь обновляет адресную строку и историю.

replaceState

history.replaceState(state, "", url) заменяет текущую запись истории, а не добавляет новую. Используйте его, если хотите обновить адрес без создания нового шага возврата (например, при обновлении строки запроса фильтра).

// Update query string in place
const url = new URL(location);
url.searchParams.set("filter", "open");
history.replaceState(null, "", url);

Варианты использования pushState

Изменение маршрута SPA (нажатие навигационной ссылки без полной перезагрузки), открытие модального окна (чтобы кнопка «Назад» закрывала его), переходы между шагами пошагового сценария. Каждое значимое состояние должно становиться новой записью истории, чтобы кнопка «Назад» работала ожидаемым для пользователей образом.

Варианты использования replaceState

Обновление фильтров, сортировки и разбиения на страницы, которое не должно засорять историю; перенаправление после частичного заполнения формы; обновление параметров отслеживания без создания доступных для навигации записей. При нажатии кнопки «Назад» пользователь пропускает эти «промежуточные» состояния.

Обновление представления после pushState

pushState изменяет только адрес — ваш код должен отдельно обновить DOM. Последовательность такова: отобразите новое содержимое, затем вызовите pushState. Вместе эти действия создают работу SPA.

function navigate(path) {
  renderPage(path);
  history.pushState(null, "", path);
  window.scrollTo(0, 0);
}

Обновление заголовка и метаданных

После навигации обновляйте document.title и метатеги og:title, чтобы публикации в социальных сетях и заголовки вкладок браузера отражали текущее представление. Если забыть об этом, при последующих публикациях останется исходный заголовок — это незаметная, но распространённая ошибка SPA.

Первый вызов pushState при загрузке страницы

Вызов pushState до того, как пользователь начал навигацию, перезаписывает начальную запись. Чтобы привязать состояние к первой записи страницы, используйте replaceState: так состояние добавляется без изменения глубины истории.

Ограничение безопасности

Адреса для pushState должны относиться к тому же источнику. Попытка выполнить pushState для https://evil.com вызывает SecurityError. Это не позволяет страницам подделывать адресную строку, заставляя пользователей думать, что они находятся на другом сайте.

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

Что делает history.replaceState, чего не делает history.pushState?

Итоги

pushState добавляет новую запись истории без перезагрузки страницы — это основа маршрутизации SPA. replaceState изменяет текущую запись на месте для косметических изменений адреса. Оба метода требуют адресов того же источника и игнорируют аргумент заголовка. Всегда отдельно обновляйте DOM и не забывайте после навигации обновлять document.title и метатеги.

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

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

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

Чему я научусь в уроке «pushState и replaceState»?

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

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

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

Сколько времени занимает урок «pushState и replaceState»?

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

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

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

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

← Назад к HTML Academy