Behandeln Sie das URL-Ankeränderungsereignis in js

87

Wie kann ich den JavaScript-Rückrufcode schreiben, der bei Änderungen im URL-Anker ausgeführt wird?

Zum Beispiel von http://example.com#abishttp://example.com#b

— Bogdan Gusiev
quelle

126

Benutzerdefinierte Google-Suchmaschinen verwenden einen Timer, um den Hash mit einem vorherigen Wert zu vergleichen, während der untergeordnete Iframe in einer separaten Domain den Standort-Hash des übergeordneten Elements aktualisiert, um die Größe des Körpers des Iframe-Dokuments zu enthalten. Wenn der Timer die Änderung erfasst, kann der Elternteil den Iframe so ändern, dass er dem des Körpers entspricht, sodass keine Bildlaufleisten angezeigt werden.

So etwas erreicht Folgendes:

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 und Internet Explorer 8 alle unterstützen die hashchangeVeranstaltung:

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

und zusammensetzen:

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 hat auch ein Plugin, das nach dem Hashchange-Ereignis sucht und bei Bedarf ein eigenes bereitstellt - http://benalman.com/projects/jquery-hashchange-plugin/ .

BEARBEITEN : Aktualisierte Browserunterstützung (erneut).

— Andy E.
quelle

Fügen Sie der Vollständigkeit halber var storedHash = window.location.hash;den zusammenfassenden Zusammenfassungsblock hinzu. Übrigens: Heutzutage nennt man das Polyfill, denke ich.

— Frank Nocke

1

Heutzutage können Sie die hashChangeauf window stackoverflow.com/questions/6390341/how-to-detect-url-change

— Timo Huovinen

@AndyE Ich habe die Antwort gelesen, ich habe die kleine Notiz verpasst und ich habe noch nie Ereignisse gesehen, die so aussehenhashChanged(storedHash);

— Timo Huovinen

1

@TimoHuovinen: hashChangedIn diesem Fall soll es sich um eine Funktion handeln, die von einem Entwickler mithilfe dieses Codes implementiert wird. Die Antwort hier zeigt nur, wie man den Hash auf Änderungen überwachen kann, bei denen das onhashchangeEreignis nicht verfügbar ist, und kombiniert die ereignisbasierten und zeitgesteuerten Ansätze, um eine universelle Lösung bereitzustellen. Mein Punkt ist, dass die Antwort, auf die Sie verlinkt haben, der Antwort hier absolut nichts hinzufügt ;-). Sie bieten dieselben grundlegenden Informationen, sogar den Link zum jQuery-Plugin von Ben Alman. Der einzige Unterschied besteht darin, dass ich in meiner Antwort eine reine JS-Lösung angegeben habe.

— Andy E

1

Ich suchte nach einem leichten JS-Router, aber das hat den Job gut gemacht. Auch alle Abhängigkeiten beseitigt :)

— gskema

3

setInterval()ist vorerst nur eine universelle Lösung. Aber es gibt in Zukunft etwas Licht in Form eines Hashchange-Ereignisses

— NilColor
quelle

Zu onhashchange

2

Nach dem, was ich in anderen SO-Fragen sehe, ist die einzige funktionsfähige browserübergreifende Lösung ein Timer. Schauen Sie sich zum Beispiel diese Frage an.

— Pekka
quelle

2

Ich würde empfehlen, addEventListeneranstatt zu überschreiben, zu verwenden window.onhashchange, sonst blockieren Sie das Ereignis für andere Plugins.

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

Angesichts der heutigen globalen Browsernutzung ist ein Fallback nicht mehr erforderlich.

— Fabian von Ellerts
quelle

1

(Nur zur Veranschaulichung.) Das synthetische Ereignis "Hashchange" von YUI3 macht mehr oder weniger dasselbe wie die akzeptierte Antwort

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

— mjhm
quelle

0

Hier können Sie weitere Informationen erhalten

Mutationsereignistypen

Das Mutationsereignismodul ermöglicht die Benachrichtigung über Änderungen an der Struktur eines Dokuments, einschließlich Änderungen von Attribut und Text.

— rahul
quelle

Hier geht es um DOM-Änderungen.

— Raj