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