Homepage de.comp.lang.javascript
Homepage
de.comp.lang.javascript

FAQ de.comp.lang.javascript

FAQ
de.comp.lang.javascript

 

 

Bitte verwenden Sie als Einstiegsadresse in diese FAQ die Homepage der Newsgroup de.comp.lang.javascript. Der Aufenthaltsort dieser Seiten hier kann sich ohne Vorwarnung ändern.
 

 

Wie kann ich Daten zwischen Web-Seiten austauschen, die nacheinander geladen werden?

Inhalt dieser Seite

Erster Ansatz: Nutzung von Fenstern und Frames
Zweiter Ansatz: Übermittlung im URL
Dritter Ansatz: Ablegen in window.name

 

Erster Ansatz: Nutzung von Fenstern und Frames

Sobald mehrere Dokumente des eigenen Projektes gleichzeitig geöffnet sind, gibt es die Möglichkeit, von einem dieser Dokumente aus Variablen im einem anderen dieser Dokumente (genauer: in dem Fenster, in das es geladen ist) zu setzen. Im Falle der Verwendung von Frames eignet sich besonders das Frameset-Dokument dafür, da dies üblicherweise nicht ausgetauscht wird. So kann auch eine später geladene Datei auf dieselben Variablen zurückgreifen.

Vgl. "Wie kann ich auf Variablen und Objekte in einem anderen Fenster oder Frame zugreifen?"

Seitenanfang

Zweiter Ansatz: Übermittlung im URL

Seit Einführung des CGI-Standards (Common Gateway Interface) ist es üblich, Informationen aus Formularen an den URL anzuhängen. Da es JavaScript erlaubt, die Komponenten des URLs abzufragen, können wir uns diese URL-Kodierung zunutze machen und damit Daten zwischen zwei Web-Seiten austauschen.

Zwei mögliche Komponenten eines URL stehen zur Verfügung: location.search und location.hash. Ersteres dient üblicherweise dazu, einen Suchbegriff an einen Server zu übermitteln, während hash den Namen eines Ankers bezeichnet. Bei der Verwendung von search ist darauf zu achten, ob der Web-Server nicht automatisch eine Suche ausführt.

Die grundsätzliche Vorgehensweise zum Datenaustausch zwischen Quell- und Ziel-Seite sieht nun so aus:

  1. Quell-Seite: Anhängen der Daten an der URL der Ziel-Seite
  2. Ziel-Seite: Abfragen der angehängten Daten

Natürlich gibt es auch hier einige Fallstricke:

Das erste Problem ist nicht schwer zu lösen: JavaScript wandelt (fast) alles bei Bedarf in Strings um. Für das zweite Problem gibt es die Funktionen escape() und unescape(). escape() wandelt eine Zeichenkette in die URL-Kodierung um und escape() macht diese Kodierung wieder rückgängig.

Eine Funktion, mit der man auf alle im Searchpart übergebenen Werte zugreifen kann, hat Dietmar Meier mehrfach in der Newsgroup vorgestellt. Hier eine für diese FAQ überarbeitete und kommentierte, frei verwendbare Version:

  /**
   * Dieser Konstruktor zerlegt den Searchpart des URIs im aktuellen
   * Fenster und erzeugt ein neues Objekt, dessen Eigenschaften Zugriff
   * auf die dort übergebenen (skalaren) Daten erlaubt. Beispiele:
   * 1) Searchpart ist "?a=42&b=h%E4ufig%20gestellte%20Frage", ein
   *    mittels "new parsedSearchParams()" erzeugtes Objekt besitzt dann
   *    die Eigenschaften "a" mit dem Inhalt "42" (String) sowie "b" mit
   *    dem Inhalt "häufig gestellte Frage" (String).
   * 2) Searchpart ist "?c=1&c=2&c=3&d=", das Objekt besitzt dann die
   *    Eigenschaften "c" mit dem Inhalt ["1","2","3"] (ein Array von
   *    Strings) sowie "d" mit dem Inhalt null (Object).
   */
  function parsedSearchParams() {
    var aFracs, aNamVal, i, sName, sValue, sType;
    // Entfernen des "?" und Zerlegen in Teilstrings an "&" und ";".
    aFracs = location.search.substring(1).split(/[&;]/);
    // Iterieren über die so gewonnenen Teilstrings.
    for (i=0; i<aFracs.length; i++) {
      // Zerlegen des Teilstrings in Bezeichner und Wert an "=".
      var aNamVal = aFracs[i].split(/=/);
      // Nur, wenn Bezeichner vorhanden, weiter verarbeiten.
      if (aNamVal[0]) {
        // Kodierungen entfernen und leere Werte durch null ersetzen.
        sName = unescape(aNamVal[0]);
        sValue = aNamVal[1]? unescape(aNamVal[1]) : null;
        // Typ der Eigenschaft mit diesem Bezeichner holen.
        sType = typeof this[sName];
        // Wenn Eigenschaft noch nicht vorhanden, diese erzeugen.
        if (sType == "undefined") {
          this[sName] = sValue;
        }
        else {
          // Andernfalls Eigenschaft ggf. in Array wandeln.
          if (sType != "object" || this[sName] == null) {
            this[sName] = [ this[sName] ];
          }
          // Wert dem Array hinzufügen.
          this[sName][this[sName].length] = sValue;
        }
      }
    }
  }
Seitenanfang

Dritter Ansatz: Ablegen in window.name

Eine Alternative hat Thomas Fischer (Uni Kassel) im Frühjahr 1999 in der window-Eigenschaft name gefunden. Denn der dort gespeicherte Name bleibt in der gesamten Lebensdauer des Browserfensters erhalten, wenn er nicht ausdrücklich anders belegt wird. Nachteil dieser Lösung ist, daß sie im (kaum noch verbreiteten) Navigator 2 noch nicht funktioniert, da der Name dort nicht geändert werden darf.

Beispiel:

Die vorstehende Zeile wird dynamisch erzeugt. Ein Zahlenwert wird in self.name abgespeichert und bei jedem Aufruf der Seite um 1 erhöht. Testen kann man das durch Aufruf einer beliebigen anderen Adresse und anschließende Rückkehr auf diese Seite (oder einfach Reload/Neu laden/Aktualisieren ausführen).

Ein Problem besteht noch darin, daß viele Browser (z.B. Navigator) als Fensternamen nur Zeichenketten aus Buchstaben und Zahlen (sowie dem Unterstrich) akzeptieren. Gegebenenfalls müssen Daten dafür also umgewandelt werden; die Funktion escape() ist dafür nicht ausreichend. Im Inhaltsverzeichnis dieser FAQ ist ein Beispiel dafür zu finden, wie beliebige Zeichenketten übergeben werden können.

top

Diese Seite ist Teil der de.comp.lang.javascript FAQ. Die Einstiegsadresse lautet http://www.dcljs.de/. Der Text der Seite wurde erstellt von Stefan Mintert (©) und zuletzt bearbeitet von Dietmar Meier.

 ______ letzte Änderung: 12/2012 ______ 

 
© S. Mintert, Ch. Kühnel