Na oknie.miejsce.Hash-Change?

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

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/

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.

Firefox ma Zdarzenie onhashchange od wersji 3.6. Zobacz też okno.onhashchange.

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.

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.

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.

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.

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 !

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);

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.

/ align = "left" / js NPM

/ align = "left" / js GitHub

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.