Обробляти подію зміни якоря URL-адреси в js

Як я можу написати код зворотного виклику JavaScript, який буде виконаний при будь-яких змінах в прив'язці URL-адреси?

Наприклад від http://example.com#aдоhttp://example.com#b

Спеціальні пошукові системи Google використовують таймер для перевірки хешу щодо попереднього значення, тоді як дочірній iframe в окремому домені оновлює хеш батьківського місцезнаходження, щоб містити розмір тіла документа iframe. Коли таймер вловлює зміни, батько може змінити розмір iframe так, щоб він відповідав тілу, щоб смуги прокрутки не відображалися.

Щось на зразок наступного досягає того ж:

var storedHash = window.location.hash;
window.setInterval(function () {
    if (window.location.hash != storedHash) {
        storedHash = window.location.hash;
        hashChanged(storedHash);
    }
}, 100); // Google uses 100ms intervals I think, might be lower

Google Chrome 5, Safari 5, Opera 10.60 , Firefox 3.6 і Internet Explorer 8 все підтримують hashchangeподія:

if ("onhashchange" in window) // does the browser support the hashchange event?
    window.onhashchange = function () {
        hashChanged(window.location.hash);
    }

і скласти його разом:

if ("onhashchange" in window) { // event supported?
    window.onhashchange = function () {
        hashChanged(window.location.hash);
    }
}
else { // event not supported:
    var storedHash = window.location.hash;
    window.setInterval(function () {
        if (window.location.hash != storedHash) {
            storedHash = window.location.hash;
            hashChanged(storedHash);
        }
    }, 100);
}

jQuery також має плагін, який перевірятиме подію хеш-обміну та надаватиме свій власний при необхідності - http://benalman.com/projects/jquery-hashchange-plugin/ .

EDIT : оновлена ​​підтримка браузера (знову).

Я б рекомендував використовувати addEventListenerзамість перезапису window.onhashchange, інакше ви заблокуєте подію для інших плагінів.

window.addEventListener('hashchange', function() {
...
})

Дивлячись на глобальне використання браузера сьогодні, резервний варіант вже не потрібен.

setInterval()на сьогодні є єдиним універсальним рішенням. Але в майбутньому є деяке світло у вигляді події хеш-обміну

З того, що я бачу в інших запитаннях щодо SO, єдиним ефективним крос-браузерним рішенням є таймер. Ознайомтеся з цим запитанням, наприклад.

(Тільки для запису.) Синтетична подія YUI3 "hashchange" робить більш-менш те саме, що і прийнята відповідь

YUI().use('history-hash', function (Y) {
  Y.on('hashchange', function (e) {
    // Handle hashchange events on the current window.
  }, Y.config.win);
});

Ви можете отримати більше інформації з цього

Типи подій мутації

Модуль події мутації призначений для повідомлення про будь-які зміни в структурі документа, включаючи attr та текстові зміни.