Атрибут onhashchange тега <body>
Описание
Атрибут onhashchange позволяет задать JavaScript-код, который выполняется при изменении фрагмента URL (части после символа #). Это полезно для создания одностраничных приложений (SPA) и управления состоянием страницы без полной перезагрузки.
<body onhashchange="handleHashChange()">
<div id="content">
<!-- Контент будет меняться в зависимости от хэша -->
</div>
<script>
function handleHashChange() {
const hash = window.location.hash.substring(1); // Убираем #
const contentDiv = document.getElementById('content');
if (hash === 'about') {
contentDiv.innerHTML = '<h2>О нас</h2><p>Информация о компании...</p>';
} else if (hash === 'contact') {
contentDiv.innerHTML = '<h2>Контакты</h2><p>Наши контактные данные...</p>';
} else {
contentDiv.innerHTML = '<h2>Главная</h2><p>Добро пожаловать!</p>';
}
}
// Инициализация при загрузке
window.onload = handleHashChange;
</script>
</body>
Объект события hashchange:
| Свойство | Описание |
|---|---|
oldURL |
URL до изменения хэша (не поддерживается в IE) |
newURL |
URL после изменения хэша (не поддерживается в IE) |
Рекомендации по использованию:
- Используйте для создания навигации в SPA-приложениях
- Сочетайте с pushState для более сложной маршрутизации
- Обрабатывайте начальное состояние при загрузке страницы
- Кодируйте специальные символы в хэше с помощью encodeURIComponent
- Для сложных приложений рассмотрите использование роутеров (React Router, Vue Router)
Практический пример с навигацией:
<body onhashchange="loadSection()">
<nav>
<a href="#home">Главная</a>
<a href="#products">Продукты</a>
<a href="#contacts">Контакты</a>
</nav>
<main id="main-content"></main>
<script>
const sections = {
home: '<h2>Добро пожаловать</h2><p>Это главная страница...</p>',
products: '<h2>Наши продукты</h2><ul><li>Продукт 1</li></ul>',
contacts: '<h2>Контакты</h2><p>Email: info@example.com</p>'
};
function loadSection() {
const hash = window.location.hash.substring(1) || 'home';
document.getElementById('main-content').innerHTML =
sections[hash] || '<p>Раздел не найден</p>';
}
// Загружаем начальный раздел
loadSection();
</script>
</body>
Важные замечания:
- Событие не срабатывает при программном изменении location.hash
- В IE старых версий нужно использовать polling для эмуляции
- Хэш сохраняется при обновлении страницы
- Браузер не перезагружает страницу при изменении хэша
- Для сложных состояний используйте JSON в хэше
Современные альтернативы:
<script>
// 1. Использование History API
function navigateTo(path) {
history.pushState({}, '', path);
// Ваш код для обработки изменения пути
}
// 2. Обработчик с использованием addEventListener
window.addEventListener('hashchange', (event) => {
console.log('Старый URL:', event.oldURL);
console.log('Новый URL:', event.newURL);
});
// 3. Работа с комплексными состояниями
function setAppState(state) {
window.location.hash = encodeURIComponent(JSON.stringify(state));
}
function getAppState() {
try {
return JSON.parse(decodeURIComponent(window.location.hash.substring(1)));
} catch {
return null;
}
}
</script>
Примечание: Для современных веб-приложений рекомендуется использовать History API, который предоставляет более гибкие возможности управления историей браузера без зависимости от хэш-фрагментов.