Event zur Überwachung der URL-Bar des Browsers

Große Webanwendungen sind meistens "Single Pages". D.h. Teile des Inhalts bis hin zur kompletten Seite ändern sich, ohne dass der Browser die Seite neuladen muss. AJAX (Asynchronous JavaScript And XML) erlaubt es uns Seiten so zu programmieren.

Aber zurück zur Frage. Stellen sie sich vor, sie haben nun eine solche große Web-Application, z.B. ein umfangreiches Formular. Um den User jetzt nicht mit den zahlreichen Input-Feldern zu erschlagen, teilen sie das Formular in kleinere "Häppchen" auf, die für den User leichter zu verdauen sind. Der User muss jetzt übersichtlichere Formulare ausfüllen und gelangt z.B. mit einem Weiter-Button zum nächsten Formular.

Bauen wir das Szenario weiter aus. Angenommen der User macht in Formular 1 einen Eingabefehler, merkt das aber erst in Formular 2. Viele User werden nun intuitiv versuchen über den Zurück-Button des Browsers zurück in Formular 1 zu gelangen und landen aber in der zuletzt aufgerufenen Seite. Das ist natürlich unschön für den User und evtl. auch für den Formular-Ersteller, da der User vielleicht die Lust an ihrer Web-Applikation verliert. Besser ist es daher einen neuen Eintrag in die History des Browsers bei größeren Zustandsänderungen an der Single Page zu erstellen. Dafür bietet sich das Anhängen eines Hashs (Ankers) an die URL an. Dieser Vorgang veranlasst bekanntlich den Browser nicht dazu, die Seite neuzuladen. Die Single Page bleibt intakt. Genau das, was wir wollen. Nun kann der User zwischen den Formularen mit den Browser-Buttons "Zurück" und "Weiter" hin- und herschalten und zudem kann jetzt auch ein anderes als nur das Startformular direkt verlinkt werden, oder? Fast. Die Basis ist gelegt, doch bisher passiert nur etwas in der Zeile der Url, auf der Seite hingegen nichts. Denn woher soll die Seite wissen, dass falls sich der Inhalt der Adresszeile ändert, auch der Inhalt der Seite angepasst werden muss. Hierzu dient nun dieser Event. Er überwacht die Adresszeile und wird ausgeführt, sobald sich die URL ändert. Innerhalb kann eine Callback-Funktion definiert werden. Diese wird ausgeführt, wenn der Event eintritt. Ohne Callback macht das Ganze ja auch wenig Sinn. Der Callback beinhaltet sinnvollerweise den Code zur Änderungen des Inhalts der Seite je nach Hash in der Adresszeile. Somit kann der User nun die genannten Browser-Buttons einsetzen bzw. mit intelligenten Eingaben direkt zu einer gewünschten Stelle der Webapplikation springen oder diese verlinken. Hier der Code:

// -------------------------------------------------------------------
// ------------- Autor: Patrick Saar - www.patrick-saar.de -----------
// ---------------- Event Address Bar Change v. 1.0 ------------------
// ------------------ Copyright 2012 Patrick Saar --------------------
// -------------------------------------------------------------------

function watchLocation(callback) {
    var win = window.location; // window.location in Variable speichern, da mehrmalige Benutzung
    var oldLocation = win.href; // alter Inhalt der Adresszeile
    setInterval(function() { watch(); }, 100); // Aenderungen der Adresszeile alle 100ms ueberpruefen 
    function watch() {
        if(oldLocation !== win.href) { // Es hat sich was geaendert
            oldLocation = win.href;  // neue Adresse speichern
            if(callback && typeof(callback) === 'function') callback(); // Callback ausfuehren
        }
    }
}

window.onload = function() { watchLocation(); }; // Ueberwachung aktivieren

Dieser Code funktioniert in allen gängigen Browsern.

Browser, die HTML5 verstehen, kennen auch den neuen Event onhashchange. Dieser macht das Gleiche wie der Code oben, funktioniert allerdings nur in modernen Browsern.

Im untenstehenden Beipiel gibt es drei Links. Jeder Link hängt bei Klick einen Hash an die Seitenadresse und ändert die Hintergrundfarbe der Box. Dazu wurde folgender Callback in watchLocation benutzt:

watchLocation(function () {
    var win = window.location;
    if (win.hash === '#rot') document.getElementById('codes-example-box').style.background = '#f00';
    else if (win.hash === '#gruen') document.getElementById('codes-example-box').style.background = '#0f0';
    else if (win.hash === '#blau') document.getElementById('codes-example-box').style.background = '#00f';
    else document.getElementById('codes-example-box').style.background = '';
});

Klicke erst die Links an und versuche dann die Browser-Buttons bzw. eine direkte Eingabe in die Adresszeile.