ROAE-Blog

Webseiten sind in Zeiten des Web2.0 häufig komplexe, dynamische Programme. Große Soziale Netze wie Facebook machen es vor: Das Wechseln von einer Seite zur nächsten mittels Links hat ausgedient. Vielmehr werden die Inhalte dynamisch mit Hilfe von Ajax-Anfragen in das Layout geladen. Damit ergeben sich aber auch einige Nachteile.

Einer der Hauptkritikpunkte von Ajax ist die fehlende native Unterstützung von Bookmarks – also Favoriten. Dynamisch durch Javascript und Ajax veränderte Webseiten lassen sich nicht in ihrem momentanen Zustand zu den Favoriten hinzufügen, da lediglich die URL der Seite nicht aber die vorangegangen Aktionen des Benutzers die zum momentanen Zustand der Seite geführt haben, gespeichert werden. Gleiches gilt für das Verlinken auf solche dynamischen Seiten – in Zeiten des Austausch von Links in sozialen Netzwerken ein nicht zu unterschätzendes Defizit.

Dabei gibt es Wege und Möglichkeiten auch Javascript mit Parametern über eine URL zu versorgen. Ein simples Beispiel soll hier gezeigt werden.

Javascript Parameter mittels Anker

Anker, das ist der letzte Teil einer jeden URL, beginnend mit einem Raute- oder auch Hash-Zeichen(#). Anker verweisen auf ‘Lesezeichen’ auf der Webseite und dienen dazu, beim Verlinken verticale Lesezeichen anzuspringen oder auch um innerhalb einer Webseite vertikal zu springen.

Der große Vorteil von Ankern für Javascript Parameter ist die Möglichkeit diese durch Javascript zur Laufzeit zu verändern ohne, dass die Webseite verlassen wird. Es ist also möglich die Anker jederzeit durch Javascript ohne Einschränkung des Benutzers zu bearbeiten. Anker können über den Zugriff auf die Eigenschaft

window.location.hash

ausgelesen und verändert werden.

Mehrere Javascript Parameter im Anker unterbringen

Wie bei gewöhnlichen GET-Parametern, müssen auch mehrere Javascript Parameter möglich sein. GET-Parameter verwenden zur Trennung ein & Zeichen:

http://url.de?parameter1=wert1&parameter2=wert2

Auch bei Javascript-Parametern kann ein &-Zeichen verwendet werden um Parameter von einander zu trennen. Ich persönlich schlage aber das ~-Zeichen vor um Javascript-Parameter von den gewöhnlichen GET-Parametern auch optisch zu trennen.

http://url.de?parameter1=wert1&parameter2=wert2#javascript1=jswert1~javascript2=jswert2

Selbstverständlich ist dies nur Geschmackssache und ist abhängig von der jeweiligen verwendeten Implementierung.

Javascript Parameter auslesen

Um die mitgegebenen Parameter auszulesen nutze ich die folgende rudimentäre Implementierung:

function getParams() {
	var params = window.location.hash.replace('#', '').split('~');
	var toReturn = new Array();
	for(var i = 0; i < params.length; i++) {
		var find = /^(\w+)(=(.*))?$/;
		find.exec(params[i]);
		toReturn[RegExp.$1] = RegExp.$3;
	}
	return toReturn;
}

Die Funktion wird beim Start ausgeführt und gibt ein assoziatives Array ähnlich der $_GET und $_POST Arrays in PHP zurück. Selbstverständlich ist auch eine objekt-orientierte Implementierung möglich (ja, richtig gehört, Javascript kann sehr wohl objektorientiert sein).

Javascript Parameter setzen und löschen

Javascript Parameter können wie folgt gesetzt werden:

function setParam(param, value) {
	var paramtxt = (value) ? param + '=' + value : param; // Parameter zusammensetzen
	var params = window.location.hash.replace('#', '').split('~');
	var location = params.findParam(param);
	if(location === false)
		// wenn der Parameter noch nicht gesetzt war, setzen wir den Parameter neu
		params.push(paramtxt);
	else
		// war der Parameter schon gesetzt ändern wir ihn entsprechend ab
		params[location] = paramtxt;
	window.location.hash = params.join('~');
}

/* Array.findParam(needle) Hilfsfunktion - ähneld einer in_array Funktion */
Array.prototype.findParam = function(needle) {
	for(var i = 0; i < this.length; i++)
		if(this[i].search('^' + needle + '(=.*)?$') != -1) return i;
	return false;
}

Parameter lassen sich so ohne Probleme neu setzen oder überschreiben. Um Parameter komplett zu löschen eignet sich folgende Funktion:

function removeParam(param) {
	var params = window.location.hash.split('~');
	var location = params.findParam(param);
	if(location !== false)
		params.splice(location, location);
	window.location.hash = params.join('~');
}

Mit diesen drei Funktionen können wir also Javascript Parameter im Anker auslesen, setzen und löschen. Das sollte für eine einfache Implementierung reichen.

Beispiel

Ein einfaches Anwendungsbeispiel findet sich hier: http://labs.daslaboratorium.de/roae/jsparams.html

Mein erster Gehversuch mit JavaScript Parameter findet sich auf www.regnets.in implementiert.

Kommentare oder Anregungen? Dafür gibt es die Möglichkeit zum Kommentieren.