Homepagebau
Dateiversion:
diesen Beitrag diskutieren,
ergänzen, eine Frage stellen

Parameterübergabe (Query-Strings)

Schwierigkeit: für Fortgeschrittene

 

Beispiel-Skript zur Auswertung von URL-Parameterlisten:
dieses Beispiel setzt die Hintergrundgrafik auf eine übergebene URL

Beschreibung:

Sie haben (wie ihnen vielleicht schon bei einigen fremden Seiten aufgefallen ist) die Möglichkeit, in ihrer URL Parameter anzugeben, die mit JavaScript oder CGI ausgelesen werden können - wozu das? Zum Beispiel um Nutzerdaten zu übergeben, oder Formulare individuell zu gestalten. Sie können es außerdem nutzen, um den Inhalt von Variablen von einem Dokument zum anderen zu schieben - auch wenn es wesentlich elegantere Lösungen hierfür gibt.

Parameterübergabe zw. Skripten

Wie stellen wir das an? Als erstes schauen wir uns die Beschaffenheit der Parameter an:

testseite.htm?parameter1&parameter2&parameter3 ... Sie sehen, alles was hinter "?" steht, ist eine durch Trennzeichen - hier ein "&" - getrennte Liste von Parametern. Was sie als Trennzeichen verwenden, ist ihnen freigestellt. "&" oder ";" sind allgemein häufig verwendete Beispiele für solche Trennzeichen. Achten sie einfach darauf, dass dieses Zeichen im normalen Textablauf der Parameter nicht verwendet wird.

Also: wie lesen wir diese Parameter aus? Nichts leichter als dass: das Objekt "document" hat die Eigenschaft "location", welche die URL angibt, mit welcher das Dokument geöffnet wurde. "location" ist ein les- und schreibbarer String. Dieser hat die Eigenschaft "search" - mit der sie (oh Freude!) direkt auf den Teil der URL zugreifen können, der hinter "?" steht. (Leider inklusive dem "?").

Beispiel:

Angenommen eine Seite wurde aufgerufen mit "http://www.provider.de/meineseite.html?Parameter1&Parameter2&Parameter3".
Wie sie sehen werden der Seite "meineseite.html" 3 durch ein Trennzeichen abgetrennte Parameter übergeben. Nun wollen wir auf "meineseite.html" die Parameterliste auslesen.

var parameter = document.location.search;

Das Ergebnis lautet "?Parameter1&Parameter2&Parameter3".
Jetzt eliminieren wir zunächst das "?", welches uns unnütz erscheint:

parameter = parameter.substring(1, parameter.length);

"substring(start, ende)" nimmt die Startposition und das Ende als Argument (das erste Zeichen ist bei "0" - "1" ist also das zweite Zeichen!). "length" ist ein nur lesbarer Wert, der die Länge des Strings angibt. Dieser Operator liefert hier also den String zurück, der zwischen dem 2. und dem letzten Zeichen des Strings "parameter" liegt.

Wie sie sich vielleicht erinnern, haben wir Trennzeichen erwähnt. In diesem Fall verwenden wir dazu '&'. Die Variable "parameter" enthält nun die komplette Liste samt Trennzeichen: "Parameter1&Parameter2&Parameter3" (Das nützt uns gar nichts) Was wir jedoch wollen, sind die einzelnen Parameter dieser Liste.

Wir "splitten" unseren String "parameter" also auf in ein Array (eine "echte" Liste) der einzelnen Parameter. Das ist in JavaScript sehr bequem und narrensicher gelöst. Wir nutzen den Stringoperator "split(trennzeichen)" und erzeugen damit aus "Parameter1&Parameter2&Parameter3" ein Array mit den Elementen "Parameter1", "Parameter2" und "Parameter3":

parameter = parameter.split('&');

Wirklich kein Problem: parameter ist jetzt ein Array. "split" nimmt nur ein einziges Argument: das Trennzeichen oder den Trennzeichenstring (auch das ist möglich) und liefert das gewünschte Datenfeld ohne Trennzeichen zurück. Nun können wir also endlich nach Herzens Lust auf unsere Parameter zugreifen:

var parameter1 = parameter[0]; // = "Parameter1"
var parameter2 = parameter[1]; // = "Parameter2"
var parameter3 = parameter[2]; // = "Parameter3"

Etwas eleganter ist natürlich folgende Variante, die alles quasi auf einen Schlag erledigt - kurz (dafür auf den ersten Blick ziemlich kryptisch) aber tut genau das was wir wollen.

var parameter = location.search.substring(1, location.search.length).split('&');

Es gibt allerdings noch etwas anderes, was dies alles etwas "tricky" werden lässt - ich rede von Sonderzeichen. In URLs werden Sonderzeichen durch so genannte Escape-Sequenzen angezeigt. Zum Beispiel Leerzeichen durch "%20" - weil Sonderzeichen normalerweise in URLs nicht vorkommen dürfen.

Dankenswerterweise hält JavaScript dafür eine sehr bequeme Lösung bereit:
Die Funktionen "escape(string)" und "unescape(string)" wandeln einen beliebigen String in diese kodierte Syntax um und auch wieder zurück.

Wenn wir also einen Parameter mit Hilfe des "Search-String" einer URL (der Text, welcher nach dem "?" erscheint) übergeben, sollten wir den String vorher mit "string = escape(string)" entsprechend kodieren.

(Zwar erledigt der Internet Explorer das automatisch, der Netscape Browser jedoch nicht!)

Um ihn wieder auszulesen verwenden wir die Funktion "unescape" (genauer: "string = unescape(string)"). Unser Skriptfragment muss also noch ein wenig modifiziert werden.

Zusammenfassung:

zuerst den Search-String aus URL auslesen

var parameter = document.location.search;

danach das (den Search-String) einleitende '?' entfernen

parameter = parameter.substring(1, parameter.length);

jetzt den String samt Parameter dekodieren

parameter = unescape(parameter)

und zuletzt die Parameterliste (am Trennzeichen, hier '&') als Array aufspliten

parameter = parameter.split('&');

'parameter' ist jetzt ein Array, dessen Elemente die einzelnen übergebenen
Parameter widerspiegeln

var parameter1 = parameter[0];
var parameter2 = parameter[1];
...
var parameterN = parameter[N-1];

 

oder in einem Schritt:

var parameter = location.search.substring(1, location.search.length).split('&');

Fertig!

Okay - was fangen wir jetzt damit an?
Gestatten sie mir an dieser Stelle einen breiten Grinser und den Verweis auf ihre eigene Fantasie.

Zum Ausprobieren:

Dieses Formular erstellt eine Testseite gemäß den Parametern,
welche vom Nutzer vorgegeben werden. 

Farbe des Hintergrunds (hexadezimal Bsp: FFFFFF):

gewünschte Textfarbe (hexadezimal Bsp: 000000):

einzufügender Text:

 

Autor: Thomas Meyer

Home: www.All-Community.de

 Kontakt: