AJAX und der „Vor“ und „Zurück“ Button

Kleiner Hinweis: Dieser Blogpost nimmt an, das jQuery verwendet wird 😉

Dank AJAX kann man eine Menge Traffic einsparen – allerdings hat AJAX leider ein paar Nachteile: Die Browsernavigation, also die „Vor“ und „Zurück“ Knöpfe des Browsers, funktionieren nicht mehr.
Hier mal ein Beispiel:

HTML:

Inhalt ändern
Hier ist Inhalt 1

JavaScript:

$("a").live("click", function (e) {
    e.preventDefault();
    
    $('#content').load(e.target.href, function() {
        // nothing here yet ;)
    });
});

Klickt man nun auf „Inhalt ändern“, erscheint der Inhalt von content.html im content-div. Wenn jetzt der Benutzer allerdings wieder „Hier ist Inhalt 1“ sehen möchte, kann er nicht den „Zurück“-Button seines Browsers verwenden.

Um dieses Problem zu lösen gibt es zwei Möglichkeiten:

  • Einen hash an die aktuelle URL anhängen, etwa so: /#!content.html
  • Das HTML5 window.history-Objekt bemühen

Da die zweite Methode leider (noch) nicht von jedem Browser unterstützt wird, aber die wesentlich hübschere Methode ist, habe ich mir ein Objekt geschrieben, was beides kann!

/**
 * navigatorHistory
 *
 * Fixes navigator history for ajax-based sites
 *
 * @author agrafix 
 */
var navigatorHistory = {
	/**
	 * Title of site
	 */
	siteTitle: '',
	
	/**
	 * function to load content, needs to be set before hook()-call
	 */
	loaderFunc: null,

	/**
	 * check if the browser supports pushState
	 */
	isSupported : function() {
		return (typeof (window.history.pushState) == 'function');
	},

	/**
	 * add url to history
	 */
	add : function(url) {

		if (this.isSupported()) {
			
			window.history
					.pushState(null, this.siteTitle, url);
		} else {
			window.location.hash = "#!" + url;
		}
	},

	/**
	 * listen for back-forward button events
	 */
	hook : function() {
		if (!this.loaderFunc) {
			alert("No loaderFunc defined!");
			return;
		}
	
		if (this.isSupported()) {
			// doesn't work with jquery, no idea why :O
			window.addEventListener("popstate", function(e) {
				navigatorHistory.loaderFunc(document.location.pathname, true);
			});
		} else {
			$(window).bind('hashchange', function() {
				var location = (window.location.hash).replace(/^#!/, '');
				navigatorHistory.loaderFunc(location, true);
			});
		}

	}
};

Die Benutzung in Verbindung mit dem obigen HTML-Schnipsel ist denkbar einfach:

// funktion zum laden der Seiten definieren
navigatorHistory.loaderFunc = function(url, nohistory) {
	if (!nohistory) {
		navigatorHistory.add(url);
	}
	
	$('#content').load(url);
};

// seiten titel
navigatorHistory.siteTitle = "Deine Seite";

// auf vor bzw. zurück-button klicks hören
navigatorHistory.hook();

// die eigentliche ajax-funktion
$("a").live("click", function (e) {
    e.preventDefault();
	
	navigatorHistory.loaderFunc(e.target.href);
});

Eigentlich relativ einfach einzubauen und es macht eine Seite deutlich benutzerfreundlicher!

 

at

 

5 Gedanken zu „AJAX und der „Vor“ und „Zurück“ Button

  1. Hallo!

    Interessantes Beispiel, leider funktioniert es nicht.
    Im InternetExplorer funktioniert der Rücksprung auf den Ursprungs-Zustand nicht, obwohl in der Adresszeile alles gut aussieht.
    Im Firefox funktionert der Rücksprung, aber nun taucht der Link „Inhalt ändern“ zweimal auf.
    Ist also noch einiges an Fehlerbehebung nötig.

    mfg Jens

  2. Pingback: Anonymous
  3. Hi,

    gutes Beispiel, aber wie siehts mit mehrfachem zurückspringen aus, irgendwie vermiss ich das in deinem Beispiel oder hast du das noch wo anders bereitgestellt? Für mich persönlich wäre das wieder nach vorne springen noch wertvoll, also zurück und dann wieder vor. Danke vorab!

    Viele Grüße
    Markus von Internetagentur MÜnchen

  4. Das Beispiel ist inzwischen (Aug. 2014) völlig veraltet und funktioniert unter jquery > 1.8 überhaupt nicht mehr.
    Lösung überarbeiten oder löschen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert