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

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

85 голосов
/ 29 января 2010

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

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

Ответы [ 6 ]

123 голосов
/ 29 января 2010

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

РЕДАКТИРОВАТЬ : обновлена ​​поддержка браузера (снова).

3 голосов
/ 29 января 2010

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

2 голосов
/ 29 января 2010

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

1 голос
/ 09 июля 2011

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

YUI().use('history-hash', function (Y) {
  Y.on('hashchange', function (e) {
    // Handle hashchange events on the current window.
  }, Y.config.win);
});
0 голосов
/ 20 марта 2019

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

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

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

0 голосов
/ 29 января 2010

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

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

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

...