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#a
dohttp://example.com#b
źródło
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#a
dohttp://example.com#b
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 hashchange
wydarzenie:
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).
var storedHash = window.location.hash;
do bloku podsumowującego składanie. Btw: Myślę, że obecnie to się nazywa polyfill.hashChange
nawindow
stackoverflow.com/questions/6390341/how-to-detect-url-changehashChanged(storedHash);
hashChanged
w 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, gdyonhashchange
zdarzenie 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.Zalecałbym używanie
addEventListener
zamiast nadpisywaniawindow.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.
źródło
setInterval()
to na razie jedyne uniwersalne rozwiązanie. Ale w przyszłości jest trochę światła w postaci zdarzenia hashchangeźródło
onhashchange
wydarzenia w Mozilla Developer NetworkZ 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 .
źródło
(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); });
źródło
Możesz uzyskać więcej informacji z tego
Typy zdarzeń mutacji
źródło