it-swarm.com.ru

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

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

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

85
Bogdan Gusiev

Системы пользовательского поиска Google используют таймер для проверки хэша по сравнению с предыдущим значением, в то время как дочерний 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.6 , 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: обновлена ​​поддержка браузера (снова).

123
Andy E

setInterval() - пока единственное универсальное решение. Но в будущем есть некоторый свет в виде событие hashchange

3
NilColor

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

2
Pekka 웃

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

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

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

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

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

0
rahul

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

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

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

0
Fabian von Ellerts