HTML5: Отлавливаем изменение hash-данных

2011-04-07

HTML5 предусматривает новое событие hashchange, которое срабатывает при изменении хеш-данных.

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

Самый простой, но не самый красивый, способ добавить обработчик события — это прописать его атрибутом в html-коде.

Пример:

<body onhashchange="myHashchangeHandler();">
...
</body>

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

// Функция обработки изменения хеш-данных
var myHashchangeHandler = function(){
alert(window.location.hash);
}
// Навешиваем функцию обработки на событие смены хеша
if("addEventListener" in window) {
// для всех веб-браузеров кроме IE
window.addEventListener("hashchange", myHashchangeHandler, false);
} else if ("attachEvent" in window) {
// для IE
window.attachEvent( "onhashchange", myHashchangeHandler);
}

Также, обработчик события «hashchange» можно навесить и с помощью jQuery.

Пример:

$(window).bind('hashchange', function() {
alert(window.location.hash);
});

Нужно сказать, что это событие не поддерживается в IE6, IE7. В остальных браузерах (Opera, Chrome, FireFox 3.6, Safari) и в IE8 и више — все работает хорошо.

Проверить код можно здесь:

ссылка с хеш-данными 1
ссылка с хеш-данными 2
ссылка с хеш-данными 3



3 комментария на «HTML5: Отлавливаем изменение hash-данных»

  1. Спасибо, помогло сделать эмуляцию навигации next/forward в AJAX — сайте)

  2. artiom:

    В IE не работает.

  3. Дмитрий:

    Не работает

Добавить комментарий