Обработка изменения window.location.hash в JavaScript

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

window.onhashchange = () => console.log(`Новый хэш: ${location.hash}`);

Этот сжатый JavaScript код позволяет отслеживать изменения в URL hash при помощи события onhashchange. Это особенно удобно для трекинга навигации в одностраничных приложениях (SPA).

Обнаружение изменения хэша в современных браузерах

Большинство сегодняшних браузеров, включая IE8+, Firefox 3.6+, Chrome 5+, поддерживают событие hashchange.

window.addEventListener('hashchange', function() {
  console.log('Ура, хэш изменился!:', location.hash);
});

Переконайтесь, что этот код работает корректно перед запуском его в продакшен, хотя он бесполезен только в очень устаревших окружениях.

Обнаружение изменения хэша в старых версиях Internet Explorer

Если вы все еще поддерживаете устаревшие версии Internet Explorer (речь идет, например, об IE7), то можете воспользоваться методом опроса с использованием setInterval.

let storedHash = window.location.hash;
setInterval(function() {
  if (window.location.hash !== storedHash) {
    storedHash = window.location.hash;
    console.log('Хэш изменился, а вы и не заметили:', storedHash);
  }
}, 100); // Проверяем изменение хэша каждые 100 мс

Этот способ может вызывать вопросы к производительности, но выполняет свою задачу.

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

Упрощение отслеживания изменений хэша при помощи jQuery

jQuery может упростить прослушивание событий hashchange, обеспечивая при этом кроссбраузерность.

$(window).on('hashchange', function() {
  console.log('Хэш поменялся, вот это да!:', location.hash);
});

Совет профи: С версии jQuery 1.9, $.browser.msie больше не поддерживается. Исключите его из своего браузер-специфичного функционала.

Продвинутое управление хэшем с reallysimplehistory

Для продвинутых разработчиков или проектов со сложными требованиями, reallysimplehistory может стать полезным инструментом для отслеживания изменений и управления историей хэша.

// Применение Really-Simple-History
var rsh = require("reallysimplehistory");
rsh.onChange(function(newLocation) {
  console.log('Новый хэш обнаружен:', newLocation.hash);
});

Перед использованием мощных инструментов не забывайте о возложенной на вас ответственности.

Особенности работы с хэшем в Internet Explorer

Будьте осторожны с особенностями обработки location.hash в Internet Explorer, в частности при работе с iframe и навигации с помощью кнопки "назад".

Обратите внимание: доступ к iframe.contentWindow.document может быть ограничен в некоторых случаях. Изменения document.domain могут помочь обойти это ограничение.

Ажурная навигация с помощью Ajax и хэшей

Сочетание изменений хэша и Ajax-навигации предоставляет плавное и очаровательное передвижение информации, как по широкой магистрали.

При помощи событий addEventListener можно улучшить взаимодействие с пользователем и сохранение состояния приложения даже после перезагрузки страницы.

Безопасность на первом месте

Не забывайте, что пользователи могут изменять хэш URL, что потенциально может привести к непредвиденным последствиям. Поэтому всегда очищайте (санируйте) входящие хэши перед их использованием на серверной стороне.

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

Изменения location.hash можно представить как перепарковку грузовика на новое место:

До: Грузовик стоит у дома 🏠 #42 (location.hash = "#home")
После: Грузовик перепарковался к офису 🏢 #55 (location.hash = "#office")

window.addEventListener('hashchange', function() {
  console.log('Место парковки сменилось! Новый адрес:', location.hash);
});

Такая метафора эффектно демонстрирует динамику изменения хэша в реальном времени.

Стратегия обработки частых изменений хэша

В приложениях, где хэш меняется часто, использование функций debounce или throttle в обработчиках события hashchange может существенно улучшить производительность.

Кодирование и декодирование URI для хэшей

Используйте encodeURIComponent и decodeURIComponent для кодирования и декодирования хэшей, содержащих специальные символы или сложные данные.

Косметическое улучшение изменений хэша при помощи CSS

Псевдокласс :target в CSS позволяет применять стили к элементам на основе текущего хэша, добавляя эстетику к вашему механизму изменения хэша.

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

1. Window: событие hashchange – Веб API | MDN — руководство по отслеживанию изменений хэша в JavaScript на MDN.
2. Window: свойство location – Веб API | MDN — подробная информация о свойствах и методах объекта window.location.
3. Использование HTML5 History API | CSS-Tricks — статья о возможностях HTML5 History API на сайте CSS-Tricks.
4. JavaScript Window Location — всё о JavaScript Window Location на W3Schools.
5. Handle URL fragment identifier (anchor) change event in Javascript – Stack Overflow — дискуссия об обработке изменений идентификатора фрагмента URL на Stack Overflow.