Obsługa zdarzenia zmiany kotwicy adresu URL w js

88

Jak napisać kod wywołania zwrotnego JavaScript, który będzie wykonywany przy wszelkich zmianach w zakotwiczeniu adresu URL?

Na przykład od http://example.com#adohttp://example.com#b

— Bogdan Gusiev
źródło

126

Wyszukiwarki niestandardowe Google używają licznika czasu, aby porównać hash z poprzednią wartością, podczas gdy element podrzędny iframe w oddzielnej domenie aktualizuje hash lokalizacji elementu nadrzędnego, aby zawierał rozmiar treści dokumentu iframe. Gdy licznik czasu przechwyci zmianę, element nadrzędny może zmienić rozmiar elementu iframe, aby dopasować go do treści, tak aby paski przewijania nie były wyświetlane.

Coś podobnego do następującego daje to samo:

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 i Internet Explorer 8 wszystko Wsparcie hashchangewydarzenie:

if ("onhashchange" in window) // does the browser support the hashchange event?
    window.onhashchange = function () {
        hashChanged(window.location.hash);
    }

i składając to razem:

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 ma również wtyczkę, która sprawdzi zdarzenie hashchange i w razie potrzeby dostarczy własne - http://benalman.com/projects/jquery-hashchange-plugin/ .

EDYCJA : Zaktualizowana obsługa przeglądarki (ponownie).

— Andy E.
źródło

aby uzyskać kompletność, dodaj var storedHash = window.location.hash;do bloku podsumowującego składanie. Btw: Myślę, że obecnie to się nazywa polyfill.

— Frank Nocke,

1

Obecnie możesz posłuchać hashChangena window stackoverflow.com/questions/6390341/how-to-detect-url-change

— Timo Huovinen

@AndyE Przeczytałem odpowiedź, przegapiłem małą notatkę i nigdy nie widziałem wydarzeń, które wyglądałybyhashChanged(storedHash);

— Timo Huovinen

1

@TimoHuovinen: hashChangedw tym przypadku ma być funkcją zaimplementowaną przez programistę przy użyciu tego kodu. Odpowiedź tutaj tylko pokazuje, w jaki sposób można monitorować skrót pod kątem zmian w przypadku, gdy onhashchangezdarzenie nie jest dostępne, i łączy podejście oparte na zdarzeniach i zegarze, aby zapewnić uniwersalne rozwiązanie. Chodzi mi o to, że odpowiedź, z którą się łączysz, nie dodaje absolutnie nic do odpowiedzi tutaj ;-). Zapewniają te same podstawowe informacje, nawet link do wtyczki jQuery Bena Almana. Jedyna różnica polega na tym, że w mojej odpowiedzi podałem czyste rozwiązanie JS.

— Andy E

1

Szukałem jakiegoś lekkiego routera JS, ale to wykonało swoją pracę. Wyeliminowano również wszystkie zależności :)

— gskema

4

Zalecałbym używanie addEventListenerzamiast nadpisywania window.onhashchange, w przeciwnym razie zablokujesz zdarzenie dla innych wtyczek.

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

Patrząc na dzisiejsze globalne wykorzystanie przeglądarek, rozwiązanie awaryjne nie jest już potrzebne.

— Fabian von Ellerts
źródło

3

setInterval()to na razie jedyne uniwersalne rozwiązanie. Ale w przyszłości jest trochę światła w postaci zdarzenia hashchange

— NilColor
źródło

FYI: dokumentacjaonhashchange wydarzenia w Mozilla Developer Network

2

Z tego, co widzę w innych pytaniach SO, jedynym działającym rozwiązaniem dla różnych przeglądarek jest licznik czasu. Sprawdź na przykład to pytanie .

— Pekka
źródło

1

(Tak dla przypomnienia). Zdarzenie syntetyczne „hashchange” w YUI3 robi mniej więcej to samo, co zaakceptowana odpowiedź

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

— mjhm
źródło

0

Możesz uzyskać więcej informacji z tego

Typy zdarzeń mutacji

Moduł zdarzeń mutacji służy do powiadamiania o wszelkich zmianach w strukturze dokumentu, w tym o modyfikacjach atr i tekstu.

— rahul
źródło

Chodzi o zmiany DOM.

— Raj