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

Ответы:

126

Системы пользовательского поиска 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;в сводный блок сборки. Кстати: в настоящее время я думаю, это называется полифиллом.
Фрэнк Нок
1
В настоящее время вы можете послушать hashChangeна window stackoverflow.com/questions/6390341/how-to-detect-url-change
Тимо Хуовинен
@AndyE Я прочитал ответ, я пропустил небольшую заметку, и я никогда не видел событий, которые выглядели бы какhashChanged(storedHash);
Тимо Хуовинен
1
@TimoHuovinen: hashChangedв данном случае - это функция, реализованная разработчиком с использованием этого кода. Ответ здесь просто демонстрирует, как можно отслеживать хеш-код на предмет изменений, когда onhashchangeсобытие недоступно, и сочетает в себе подходы на основе событий и таймера для обеспечения универсального решения. Я хочу сказать, что ответ, на который вы ссылались, абсолютно ничего не добавляет к ответу здесь ;-). Они предоставляют ту же основную информацию, даже ссылку на плагин jQuery Бена Алмана. Единственная разница в том, что я предоставил в своем ответе чистое JS-решение.
Энди Э
1
Я искал какой-нибудь легкий JS-роутер, но он отлично справился со своей задачей. Также устранены все зависимости :)
gskema
4

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

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

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

Фабиан фон Эллертс
источник
2

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

Пекка
источник
1

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

YUI().use('history-hash', function (Y) {
  Y.on('hashchange', function (e) {
    // Handle hashchange events on the current window.
  }, Y.config.win);
});
mjhm
источник
0

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

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

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

рахул
источник
Речь идет об изменениях DOM.
Raj