Обработка события изменения привязки URL в js

Как я могу написать код обратного вызова JavaScript, который будет выполняться при любых изменениях привязки URL?

Например, с http://example.com#a по http://example.com#b


javascript event-handling dom-events hashchange fragment-identifier
person Bogdan Gusiev    schedule 29.01.2010    source источник

Ответы (6)


arrow_upward
129
arrow_downward

Системы пользовательского поиска 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/.

EDIT: обновлена ​​поддержка браузера (снова).

person Andy E    schedule 29.01.2010
comment
для полноты картины добавьте var storedHash = window.location.hash; в сводной блок. Кстати: в настоящее время это называется полифилл, я думаю. - person Frank Nocke; 31.03.2013
comment
В настоящее время вы можете прослушать hashChange на window stackoverflow.com/ вопросы/6390341/как определить изменение URL - person Timo Huovinen; 08.10.2013
comment
@AndyE Я прочитал ответ, пропустил небольшое примечание и никогда не видел событий, похожих на hashChanged(storedHash); - person Timo Huovinen; 09.10.2013
comment
@TimoHuovinen: hashChanged в данном случае предназначен для функции, реализованной разработчиком с использованием этого кода. Ответ здесь просто демонстрирует, как можно отслеживать изменения хэша, когда событие onhashchange недоступно, и сочетает в себе подходы, основанные на событиях и таймерах, для обеспечения универсального решения. Я хочу сказать, что ответ, на который вы ссылаетесь, абсолютно ничего не добавляет к ответу здесь ;-). Они предоставляют ту же основную информацию, даже ссылку на плагин jQuery Бена Алмана. Единственная разница в том, что в своем ответе я предоставил чистое решение JS. - person Andy E; 09.10.2013
comment
@AndyE хорошо, не знал о необходимости реализации этой функции, спасибо за разъяснение - person Timo Huovinen; 09.10.2013
comment
Я искал какой-нибудь легкий JS-маршрутизатор, но он отлично справился со своей задачей. Также устранены все зависимости :) - person gskema; 22.06.2014

arrow_upward
7
arrow_downward

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

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

Глядя на глобальное использование браузера сегодня, запасной вариант больше не нужен.

person Fabian von Ellerts    schedule 20.03.2019

arrow_upward
3
arrow_downward

Из того, что я вижу в других вопросах SO, единственное работающее кросс-браузерное решение - это таймер. Посмотрите, например, этот вопрос.

person Pekka    schedule 29.01.2010

arrow_upward
3
arrow_downward

setInterval() пока единственное универсальное решение. Но в будущем есть свет в виде событие изменения хэша

person NilColor    schedule 29.01.2010
comment
К вашему сведению: документация события onhashchange в Mozilla Developer Network - person ; 28.05.2015

arrow_upward
2
arrow_downward

(Просто для протокола.) Синтетическое событие «hashchange» YUI3 делает более или менее то же самое, что и принятый ответ.

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

arrow_upward
0
arrow_downward

Вы можете получить больше информации из этого

Типы событий мутации

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

person rahul    schedule 29.01.2010
comment
Это касается изменений DOM. - person Raj; 20.09.2017