Обновление URL в адресной строке Chrome без перезагрузки

Быстрый ответ

Если вы хотите изменить URL в адресной строке браузера без перезагрузки того же, то воспользуйтесь методом history.pushState из HTML5 History API:

history.pushState(null, "", "/new-url");

Замените "/new-url" на желаемый URL. Учитывайте, этот метод не провоцирует загрузку новой страницы, а лишь обновляет URL в адресной строке.

Расшифровка HTML5 History API

pushState и replaceState: ключевые методы

Методы pushState и replaceState — это центральные механизмы HTML5 History API, которые позволяют программистам обновлять URL в браузере без необходимости перезагрузки страницы.

Эти два метода принимают по три аргумента:

• Объект состояния: это может быть любым сериализуемым объектом, который привязывается к новой записи истории, когда используется pushState.

• Заголовок: на практике этот параметр игнорируется браузерами, так что можно передать пустую строку.

• URL: предполагаемый URL для отображения — он обязательно должен иметь тот же оригин что и текущий, иначе произойдет ошибка из-за политики безопасности.

replaceState используют для обновления записи истории без её сохранения:

history.replaceState(null, "", "/new-secret-url");

В отличие от pushState, этот метод заменяет текущую запись на новый URL.

Подробнее об этом расскажет наш спикер на видео

Применения pushState и replaceState

• Одностраничные приложения: pushState удобно использовать для навигации по разделам приложения без полной перезагрузки.

• Формы с фильтрацией: этот метод применяется для обновления URL в соответствии с поисковыми запросами и фильтрами, благодаря чему пользователи могут делиться ссылками на определенные результаты.

• Загрузка динамического контента: когда нужно отобразить такие элементы, как вкладки или модальные окна, с помощью pushState можно добавить соответствующие записи в историю браузера.

Обработка событий popstate

При навигации с помощью кнопок "назад" и "вперед" браузер порождает событие popstate. Для нормального функционирования необходимо добавить обработчик для данного события:

window.addEventListener('popstate', function(event) {
  // Обработка нажатия на кнопки навигации.
  // event.state содержит сохраненный объект состояния.
});

Визуализация

Допустим, вы хотите перекрасить комнату (то есть изменить URL), не переезжая (без перезагрузки страницы), и без покинуть ее (без использования хеша):

Сначала: 🏠🚪🛏️ (Текущий URL)
Изменение: 🔄🚪🔧 (Процесс обновления без ухода)
После:  🏠🛏️🖼️ (Новый обновленный URL)

Обновление интерьера комнаты:

history.pushState(null, null, 'new-decor'); // Украшаем стены новыми картинами!

В итоге комната выглядит иначе, и всё это без всяких хлопот 🎉.

Практическoe применение HTML5 History API

Проверка URL

Убедитесь, что новый URL, передаваемый в pushState или replaceState, валиден и соответствует политике одного источника. Изменения происхождения URL недопустимы по соображениям безопасности:

try {
    history.pushState(null, "", "/secure-path");
} catch (e) {
    console.error("Не удалось обновить состояние:", e);
}

Ручная загрузка содержимого

Поскольку методы History API не подразумевают автоматическую загрузку нового содержимого, вам будет нужно самостоятельно обеспечить его подгрузку, например, с использованием AJAX или fetch API:

function updateContent(url) {
    // Обновление содержимого страницы
    fetch(url)
        .then(response => response.text())
        .then(html => document.getElementById('content').innerHTML = html);
}

history.pushState(null, "", "/appealing-content");
updateContent("/appealing-content");

Синхронизация названия страницы

Поскольку браузеры часто не обращают внимания на параметр title, при изменении URL можно обновить заголовок страницы самостоятельно:

document.title = "Новая восхитительная Страница";
history.pushState(null, document.title, "/better-and-newer");

Полезные материалы

1. HTML5 History API – Веб API | MDN – детальная документация и примеры работы с History API.
2. Обновление URL в адресной строке без хеша и перезагрузки страницы – Stack Overflow – обсуждения и решения по использованию методов pushState и replaceState.
3. Использование HTML5 History API | CSS-Tricks – понятное объяснение и пример использования History API.
4. History.js на GitHub – либо для улучшения работы History API и обеспечения совместимости в различных браузерах.
5. Как узнать текущий URL с помощью JavaScript? – Stack Overflow – методы доступа и работы с текущим URL.
6. Can I use... Support tables for HTML5, CSS3, etc – сведения о совместимости браузеров для History API.
7. HTML5 History API – Восстановление положения прокрутки | Chrome for Developers – описание восстановления положения прокрутки страницы с использованием History API.