Как написать код обратного вызова JavaScript, который будет выполняться при любых изменениях в привязке URL-адреса?
Например, от http://example.com#a
до http://example.com#b
Как написать код обратного вызова JavaScript, который будет выполняться при любых изменениях в привязке URL-адреса?
Например, от http://example.com#a
до http://example.com#b
Google Custom Search Engines использует таймер, чтобы проверить хэш на предыдущее значение, в то время как дочерний 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 также имеет плагин, который будет проверять событие hashchange и предоставлять его, если необходимо, http://benalman.com/projects/jquery-hashchange-plugin/.
EDIT: обновлена поддержка браузера (снова).
setInterval()
пока только универсальное решение. Но в будущем есть некоторый свет в форме событие hashchange
Из того, что я вижу в других вопросах SO, единственное работоспособное кросс-браузерное решение - это таймер. Например, этот вопрос.
(Только для записи.) Синтетическое событие YUI3 "hashchange" делает более или менее то же самое, что и принятый ответ
YUI().use('history-hash', function (Y) {
Y.on('hashchange', function (e) {
// Handle hashchange events on the current window.
}, Y.config.win);
});
Я бы рекомендовал использовать addEventListener
вместо перезаписи window.onhashchange
, иначе вы заблокируете событие для других плагинов.
window.addEventListener('hashchange', function() {
...
})
Глядя на глобальное использование браузера сегодня, запасной вариант больше не нужен.
Вы можете получить больше информации из этого
Модуль событий мутации разработан разрешить уведомление о любых изменениях к структуре документа, включая изменения attr и текста.