Na oknie.miejsce.Hash-Change?
Używam Ajax i hash do nawigacji.
Czy Jest jakiś sposób, aby sprawdzić, czy window.location.hash
zmienił się w ten sposób?
Http://example.com/blah#123 do http://example.com/blah#456
To działa, jeśli sprawdzę to podczas ładowania dokumentu.
Ale jeśli mam nawigację opartą na #hash, to nie działa po naciśnięciu przycisku Wstecz w przeglądarce (więc przeskakuję z bla#456 na bla#123).
Pokazuje się w polu adresu, ale nie mogę złapać to z JavaScript.
13 answers
Jedynym sposobem, aby to zrobić (i jak to robi "reallysimlehistory"), jest ustawienie interwału, który ciągle sprawdza bieżący hash i porównując go z tym, co było wcześniej, robimy to i pozwalamy subskrybentom subskrybować zmienione zdarzenie, które odpalimy, jeśli hash się zmieni.. nie jest idealny, ale przeglądarki naprawdę nie obsługują tego zdarzenia natywnie.
Update to keep this answer fresh:
Jeśli używasz jQuery (który dziś powinien być nieco fundamentalny dla większość) dobrym rozwiązaniem jest użycie abstrakcji, którą jQuery daje za pomocą systemu zdarzeń do nasłuchiwania zdarzeń hashchange na obiekcie window.
$(window).on('hashchange', function() {
//.. work ..
});
Fajną rzeczą jest to, że możesz pisać kod, który nie musi nawet martwić się o obsługę hashchange, jednak musisz zrobić trochę magii, w postaci nieco mniej znanej funkcji jQuery jQuery special events .
Dzięki tej funkcji możesz uruchomić kod konfiguracyjny dla każdego zdarzenia, za pierwszym razem ktoś próbuje użyć zdarzenia w jakikolwiek sposób (np. powiązanie z zdarzeniem).
W tym kodzie konfiguracyjnym możesz sprawdzić natywną obsługę przeglądarki, a jeśli przeglądarka nie zaimplementuje tego natywnie, możesz ustawić pojedynczy timer, aby sprawdzał zmiany i wyzwalał Zdarzenie jQuery.
To całkowicie odciąża Twój kod od konieczności zrozumienia tego problemu wsparcia, implementacja specjalnego zdarzenia tego rodzaju jest trywialna( aby uzyskać prostą wersję 98% działającą), ale dlaczego to zrobić gdy ktoś inny już.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-03 08:07:48
HTML5 określa Zdarzenie hashchange
. To zdarzenie jest teraz obsługiwane przez wszystkie nowoczesne przeglądarki . Wsparcie zostało dodane w następujących wersjach przeglądarki:
- Internet Explorer 8
- Firefox 3.6
- Chrome 5
- Safari 5
- Opera 10.6
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-15 19:31:35
Zauważ, że w przypadku Internet Explorer 7 i Internet Explorer 9 statment if
Da true (dla "onhashchange" w windows), ale window.onhashchange
nigdy nie odpali się, więc lepiej przechowywać hash i sprawdzać go po każdym 100 milisekundzie, czy jest zmieniony, czy nie dla wszystkich wersji Internet Explorera.
if (("onhashchange" in window) && !($.browser.msie)) {
window.onhashchange = function () {
alert(window.location.hash);
}
// Or $(window).bind( 'hashchange',function(e) {
// alert(window.location.hash);
// });
}
else {
var prevHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != prevHash) {
prevHash = window.location.hash;
alert(window.location.hash);
}
}, 100);
}
Edytuj - Od wersji jQuery 1.9, {[3] } nie jest obsługiwane. Źródło: http://api.jquery.com/jquery.browser/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-12 03:17:32
Istnieje wiele sztuczek, aby poradzić sobie z historią i oknem.miejsce.hash w przeglądarkach IE:
-
Jak zostało powiedziane oryginalne pytanie, jeśli przejdziesz ze strony a. html # B Do a.html # C, a następnie naciśniesz przycisk Wstecz, przeglądarka nie wie, że strona się zmieniła. Powiem to na przykładzie: okno.miejsce.href będzie 'a. html # C', bez względu na to, czy jesteś w a. html # b Czy a. html#C.
W rzeczywistości a. html # B I a. html # c są przechowywane w historii tylko, jeśli elementy ' ' and '' exists previously in the page.
Jeśli jednak umieścisz ramkę iframe wewnątrz strony, Przejdź od A. html # b Do a. html # C w tym ramce iframe, a następnie naciśnij przycisk Wstecz, iframe.contentWindow.dokument.miejsce.zmiany href zgodnie z oczekiwaniami.
-
Jeśli używasz ' document.domena=coś ' w Twoim kodzie, wtedy nie masz dostępu do iframe.contentWindow.dokument.open () ' (i wielu menedżerów historii tak robi)
Wiem, że to nie prawdziwa odpowiedź, ale może notatki z historii są komuś przydatne.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-10-30 00:19:09
Firefox ma Zdarzenie onhashchange od wersji 3.6. Zobacz też okno.onhashchange.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-06 17:03:55
Ben Alman ma świetny plugin jQuery do radzenia sobie z tym: http://benalman.com/projects/jquery-hashchange-plugin/
Jeśli nie używasz jQuery, może to być interesujące odniesienie do sekcji.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-10-19 17:46:29
Można w prosty sposób zaimplementować observer (metodę" watch") na właściwości" hash "okna.lokalizacja " obiekt.
Firefox ma swoją własną implementację do obserwowania zmian obiektu , ale jeśli używasz innej implementacji (np. obserwuj zmiany właściwości obiektu w JavaScript) - w innych przeglądarkach to wystarczy.
Kod będzie wyglądał tak:
window.location.watch(
'hash',
function(id,oldVal,newVal){
console.log("the window's hash value has changed from "+oldval+" to "+newVal);
}
);
Następnie można go przetestować:
var myHashLink = "home";
window.location = window.location + "#" + myHashLink;
I oczywiście, że będzie uruchom funkcję obserwatora.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:47:20
Porządną implementację można znaleźć pod adresem http://code.google.com/p/reallysimplehistory/. Jedynym (ale również) problemem i błędem jest to, że w Internet Explorerze ręczne modyfikowanie skrótu lokalizacji spowoduje zresetowanie całego stosu historii (jest to problem przeglądarki i nie można go rozwiązać).
Uwaga, Internet Explorer 8 ma wsparcie dla zdarzenia "hashchange", a ponieważ staje się częścią HTML5, możesz oczekiwać, że inne przeglądarki nadrobią zaległości.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-06 16:59:38
Używałem tego w aplikacji reactowej, aby adres URL wyświetlał różne parametry w zależności od widoku, na którym był użytkownik.
Obserwowałem parametr hash używając
window.addEventListener('hashchange', doSomethingWithChangeFunction());
Then
doSomethingWithChangeFunction () {
// Get new hash value
let urlParam = window.location.hash;
// Do something with new hash value
};
Pracował z ucztą, działa z przyciskami do przodu i do tyłu przeglądarki, a także w historii przeglądarki.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-07 14:36:04
Kolejną świetną implementacją jest jQuery History, która użyje natywnego zdarzenia onhashchange, jeśli jest obsługiwane przez przeglądarkę, jeśli nie użyje iframe lub interwału odpowiednio dla przeglądarki, aby upewnić się, że wszystkie oczekiwane funkcje są pomyślnie emulowane. Zapewnia również ładny interfejs do wiązania niektórych stanów.
Innym projektem wartym uwagi jest jQuery Ajaxy, który jest w zasadzie rozszerzeniem dla historii jQuery, aby dodać ajax do miksu. Jako kiedy zaczniesz używać ajax z hashami, staje się to dość skomplikowane !
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:10:40
var page_url = 'http://www.yoursite.com/'; // full path leading up to hash;
var current_url_w_hash = page_url + window.location.hash; // now you might have something like: http://www.yoursite.com/#123
function TrackHash() {
if (document.location != page_url + current_url_w_hash) {
window.location = document.location;
}
return false;
}
var RunTabs = setInterval(TrackHash, 200);
To wszystko... teraz, za każdym razem, gdy naciśniesz przycisk Wstecz lub do przodu, strona zostanie przeładowana zgodnie z nową wartością hash.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-10 10:50:03
Używałem path.js do routingu po stronie klienta. Uważam, że jest dość zwięzły i lekki (został również opublikowany do NPM zbyt), i korzysta z nawigacji hash oparte.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-02 22:23:11
Użyłem wtyczki jQuery, HUtil , i napisałem Yui historię jak interfejs na nim.
Sprawdź to raz. Jeśli potrzebujesz pomocy, mogę pomóc.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-06 17:02:27