Как я могу написать код обратного вызова JavaScript, который будет выполняться при любых изменениях привязки URL-адреса?
Например от http://example.com#a
доhttp://example.com#b
источник
Как я могу написать код обратного вызова 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 также есть плагин, который проверяет наличие события hashchange и при необходимости предоставляет свое собственное - http://benalman.com/projects/jquery-hashchange-plugin/ .
РЕДАКТИРОВАТЬ : обновленная поддержка браузера (снова).
var storedHash = window.location.hash;
в сводный блок сборки. Кстати: в настоящее время я думаю, это называется полифиллом.hashChange
наwindow
stackoverflow.com/questions/6390341/how-to-detect-url-changehashChanged(storedHash);
hashChanged
в данном случае - это функция, реализованная разработчиком с использованием этого кода. Ответ здесь просто демонстрирует, как можно отслеживать хеш-код на предмет изменений, когдаonhashchange
событие недоступно, и сочетает в себе подходы на основе событий и таймера для обеспечения универсального решения. Я хочу сказать, что ответ, на который вы ссылались, абсолютно ничего не добавляет к ответу здесь ;-). Они предоставляют ту же основную информацию, даже ссылку на плагин jQuery Бена Алмана. Единственная разница в том, что я предоставил в своем ответе чистое JS-решение.Я бы рекомендовал использовать
addEventListener
вместо перезаписиwindow.onhashchange
, иначе вы заблокируете событие для других плагинов.window.addEventListener('hashchange', function() { ... })
Глядя на глобальное использование браузеров сегодня, резервный вариант больше не нужен.
источник
setInterval()
пока только универсальное решение. Но в будущем есть свет в виде события hashchange.источник
onhashchange
мероприятия в сети разработчиков MozillaИз того, что я вижу в других вопросах SO, единственное работоспособное кросс-браузерное решение - это таймер. Посмотрите, например, на этот вопрос .
источник
(Просто для записи.) Синтетическое событие YUI3 "hashchange" делает более или менее то же самое, что и принятый ответ.
YUI().use('history-hash', function (Y) { Y.on('hashchange', function (e) { // Handle hashchange events on the current window. }, Y.config.win); });
источник
Вы можете получить больше информации из этого
Типы событий мутации
источник