IT-Academy Logo
Sign Up Login Help
Home - Programmieren - JavaScript - JavaScript: Variablen per Link übergeben



JavaScript: Variablen per Link übergeben

Dieses Tutorial zeigt wie mittels Javascript Variablen per Link übergeben werden können, wie man es von serverseitigen Scriptsprachen wie PHP her kennt.


Autor: Patrick Faes (dreamer)
Datum: 12-09-2004, 20:06:22
Referenzen: siehe Text
Schwierigkeit: Fortgeschrittene
Ansichten: 48563x
Rating: 9 (2x bewertet)

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



Einführung

Webseiten waren früher sehr statisch, was bedeutete, dass diese immer gleich aussahen. Mit der Einführung von Scriptsprachen (wie z.B. JavaScript beim Client -der Surfer- und PHP beim Server) wurden die Webseiten viel dynamischer: Mathematik-Übungen online machen, anhand von der Uhrzeit die Farben ändern, anderen Inhalt laden, usw.
Die Daten die gebraucht werden, werden in sogenannte Variablen1 gespeichert. Wenn man diese weiterhin auf eine andere Seite verwenden möchte, muss man diese (im Falle von Server-seitige Scripte) am Server weiterleiten. Für die Client-seitige Variablen gab es nur die Methode von Cookies2. Cookies sind Dateien die im Browser die Werte der Variablen speichern können. Bekannterweise schalten viele Internet-Benutzer diese Möglichkeit aus Sicherheits-Gründen ab, und Webmaster die JavaScript verwenden blicken dann in die Röhre.
Mit einem Trick ist es aber möglich um die Variablen in JavaScript, wie bei Server-seitige Script-Sprachen wie PHP, die Werte per Internet-Adresse zu ermitteln.

Anmerkung: wenn Sie die Verfügung haben über Server-seitige Scripte, brauchen Sie diesen Artikel nicht. Mit PHP kann man z.B. so die Werte an JavaScript weiterleiten:
<?php
   if (isset($_GET["Variablen_Name"]))
   echo '
   <script type="text/javascript">
   var Name = '.$_GET["Variablen_Name"].';
   </script>
   ';
?>
Die Praxis: Variablen auslesen

Die Scripte die Sie brauchen um mit JavaScript die Variablen aus der Internet-Adresse zu lesen, werden hier in einzelne Teile zerlegt um so die Wirkung besser erklären zu können. Unten stehen die Scripte noch mal als ganzes.
<script type="text/javascript">
query = self.location.search;
sammlung = new Array();

if (query != '')
{

}
</script>
Am Anfang werden wir in der Variable query den Query speichern. Der Query ist der Teil der Internet-Adresse3 worin die Variablen stehen. Diese stehen hinter einem Fragezeichen. Der Query dieser Seite z.B. ist .

Hier deklarieren wir die Variable sammlung als Array worin später die Variablen kommen (wenn wir dies nicht jetzt tun, bekommen wir später Fehler). Das Array4 (Kette von variable Werten) nennt sich hier sammlung. Sie können die Variable so nennen wie Sie wollen, beachten Sie aber die Schriftgröße (abc und AbC sind nicht dasselbe5) und das Sie keine reservierte Wörter6 verwenden.

Wenn die Variable query leer ist, gibt es keine Variablen in der Internet-Adresse und daher müsste dann auch der Rest des Scripts nicht weiter ausgeführt werden.

Jetzt kommt der Teil der zwischen den Klammern kommt, also ausgeführt wird wenn die Variable query nicht leer ist (und es also Variablen in der Internet-Adresse gibt).
  query = query.substr(1, query.length - 1);
  query = query.replace(/%26/,'&');
  teile = query.split('&');

  for (i = 0; i < teile.length; i++)
  {
  teile[i] = teile[i].split('=');
  sammlung[teile[i][0]] = teile[i][1];
  }
Zuerst müssen wir das Fragezeichen von query trennen. Das Fragezeichen steht an erster Stelle. Mit der Funktion substr() nehmen wir alles ab dem zweiten Buchstaben. Dazu fangen wir an bei dem zweiten Buchstaben (JavaScript fängt an von null zu zählen, deshalb hat der zweite Buchstabe die Index-Nummer 1) und nehmen alle Buchstaben (oder andere Zeichen). Dies errechnen wir als "Länge von query minus eins (das Fragezeichen wird weggelassen)".

Internet Explorer7 ersetzt die Ampersand (&) aus dem Query der Internet-Adresse durch %26 (HEX-Code8), also werden wir diese wieder ersetzen durch ein Ampersand. Wir machen dies mit der Funktion replace()9 mit der Verwendung des regulären Ausdrucks10 /%26/.

Jetzt trennen wir die einzelne Name-Wert-Paare mit der Funktion split()11. Diese Funktion teilt den String an das aufgegebene Zeichen, in diesem Fall das Ampersand. Die Resultate werden in einem neuen String gespeichert.

Danach gehen wir in einer for-Schleife12 weiter (in einer for-Schleife werden alle Elemente einzeln durchlaufen, wenn es nur ein Element gibt, wird die Schleife nur einmal durchlaufen).

Die einzelne Elemente sehen jetzt so aus:

Variablen-Name gleich Variablen-Wert
Name=Wert

Diese sollen jetzt am gleich-Zeichen geteilt werden. Dies machen wir wieder mit der Funktion split()11. Dadurch aus einem Array-Element ein neuer Array und bekommen wir mehr-dimensionale Arrays13. Mehr-dimensionale Arrays haben mehrere Index-Nummern: eine für das Element in der haupt-Array und eine für die unter-Array.

Das erste Element der unter-Array enthält der Name der Variable und das zweite Element den Wert. Wir schreiben diese so in der haupt-Array sammlung:

sammlung[teile[i][0]] = teile[i][1];

Wobei:
teile[i][0] = Name der Variable
teile[i][1] = Wert der Variable

Der Zaehler i ist die Variable der for-Schleife und deutet an welches Element der haupt-Array teile angesprochen wurde. Die Elemente wurden weiter verteilt.

Die Praxis: die Variablen verwenden

Die Variablen kann man später ansprechen mit sammlung["Variablen_Name"] (Arrays die anstatt Index-Nummern Namen verwenden, nennt man assoziative Arrays14). Man sollte alle Variablen die man per Link weitergeben möchte, in der Array aufnehmen nach dem gleichen Muster wie die im Link ethaltenen Werte ändern.

Man kann auch testen ob eine Variable schon einen Wert hat mit if (sammlung["Variablen_Name"]). Wenn man dies mit normale Variablen in JavaScript macht und der Variable gibt es nicht, bekommt man eine Fehlermeldung, da die Variablen erst definiert werden müssen15 bevor man damit etwas machen kann (und die Variable sammlung ist ja definiert als Array mit unter-Elementen).

Um die Variablen dann an eine andere Seite weiter zu geben, müssen diese an der Internet-Adresse im Link angehängt werden. Dies kann mit reinem HTML:

<a href="seite.html?variable=wert">16

Diese Methode hat aber zum Nachteil, dass die aktuellen Werte der Variablen nicht automatisch an der nächsten Seite weitergeleitet werden. Man kann dafür eine Funktion mit JavaScript bauen. Diese kann aber nur benutzt werden von Leuten die JavaScript nicht deaktiviert haben (sind sehr wenige die das machen, aber die Tendenz ist steigend), deshalb sollte ein alternativer Link gesetzt werden, sodass diese Leute zumindest etwas sehen. Wir bauen die Links dann so:

<a href="seite.html?variable=wert" onClick="navigation('seite.html','variable=wert','leren'); return false;">

Zerbrechen Sie Ihren Kopf noch nicht über diese Funktion, die Erklärung folgt wenig später. Wenn Sie nur die JavaScript-Variante verwenden möchten, können Sie den Link so bauen:

<a href="javascript:navigation('seite.html','variable=wert','leren');">

Wenn Sie nur das Ereignis17onClick verwenden, werden die Links nicht als solche formatiert, was heißt, dass die Links nicht gefärbt sind und auch der Mauszeiger ändert sich beim Überfahren nicht. Es sind ganz normale, schwarze Texte (für den Besuchern nicht erkennbar als Links).
Man kann aber auch eine reine onClick-Variante verwenden. Diese funktioniert dann z.B. auch beim Click auf einer Tabellen-Zellen.

Lassen wir uns jetzt mal die Funktion anschauen. Sie ist eine selbst erstellte Funktion18.
function navigation(seite,var_werte,var_leren)
{

}
Die Funktion wird per Link 3 Variablen gegeben. Eine für die zu öffnende Seite (z.B. seite.html), eine für die Werte die die Variablen bekommen sollen und eine für die Variablen die gelöscht werden sollen. Wenn man eine Variable keinen neuen Wert gibt und sie nicht löscht, wird der aktuelle Wert automatisch mitgegeben. Beachten Sie, dass in den Links immer alle drei Parameter gesetzt werden müssen. Wenn Sie keine Variablen ändern wollen, können Sie diese einfach leer lassen, z.B. <a onClick="navigation('seite.html',' ',' ');">. Beachten Sie dabei den Gebrauch von Anführungszeichen19.

Die Funktion besteht aus 3 großen Code-Blöcken.
if (var_werte != '')
    {
      teile = var_werte.split('&');

      for (i = 0; i < teile.length; i++)
      {
      teile[i] = teile[i].split('=');
      sammlung[teile[i][0]] = teile[i][1];
      }
    }<(/code>
Im ersten Code-Block werden die Variablen andere Werte gegeben (nicht geleert!). Mit der Funktion split()11 werden die einzelne Variablen-Name-Wert-Paare getrennt und in der Array teile gespeichert und danach geht es weiter wie ganz am Anfang (wo die Variablen aus der Internet-Adresse genommen wurden).
Beachten Sie aber, dass Sie die Variable var_werte im Link korrekt schreiben. Dies gilt sowohl für die Namen der einzelnen Variablen als für den Gebrauch von gleich-Zeichen und Ampersands (es darf keiner zuviel darin stehen).
Wenn die Variablen geändert wurden, werden Sie später an der Internet-Adresse hinzugefügt. Sie könnten natürlich auch am Ende einfach die Variable var_werte an der Internet-Adresse ankleben. In diesem Script kann das funktionieren, man sollte aber sauberen Code verwenden und verhindern, dass eine Variable doppelt in der Internet-Adresse steht, z.B. wenn Sie neben JavaScript auch Server-seitige Scripte wie z.B. PHP verwenden.

Jetzt kommt der Teil wo die Variablen, die nicht weiter verwendet werden sollen, geleert werden. Die Variable var_leren soll per Link übergeben werden. Sie besteht aus die Namen der Variablen (die gelöscht werden müssen), jeweil getrennt durch eine Leerstelle, z.B. 'vorname hausnummer geburt'.
  leren = var_leren.split(' ');
  for (i = 0; i < leren.length; i++)
    {
    sammlung[leren[i]] = '';
    }
Die einzelne Namen der Variablen werden getrennt mit der Funktion split()11 (an der Leerstelle). Danach werden wieder mit einer for-Scheife12 alle einzelne Werte durchlaufen. Der Wert ist dabei jeweils der Name einer Variable. Diese wird dann geleert, in dem nach dem gleich-Zeichen zwei Anführungszeichen kommen mit nicht mal eine Leerstelle dazwischen.

Kommen wir jetzt zum letzten Code-Block wo die Variablen an der zu öffnenden Internet-Adresse angehängt werden.
adresse = seite + '?';

for (var inhalt in sammlung)
    {
    if (sammlung[inhalt] != '')
      {
      var fragezeichen = adresse.search(/\?$/);
      if (fragezeichen == -1) adresse += '&';
      adresse = adresse + inhalt + '=' + sammlung[inhalt];
      }
    }

  adresse = adresse.replace(/%26/,'&');
  open(adresse);
  }
Zuerst wird die zu öffnende Seite (z.B. seite.html oder http://www.seite.de/index.html) zusammen mit einem Fragezeichen in der Variable adresse gespeichert.

Die Array sammlung ist eine assoziative Array14. Diese können durchlaufen werden mit einer for infor-Scheife14.
for (var inhalt in sammlung)
  {

  }
Die Variable inhalt (wir schreiben hier var davor weil es eine lokale Variable20 ist) speichert jeweils den Index-Namen des Array-Elements. Danach kann in der Schleife der Name des Array-Elements angesprochen werden als inhalt und dessen Inhalt als sammlung[inhalt].
if (sammlung[inhalt] != '')
  {

  }
Hier wird zuerst getestet ob die Variable sammlung[inhalt] einen Wert hat. Nur wenn dies nicht der Fall ist, wird der Rest ausgeführt (ansonsten bekämen wir eine Internet-Adresse die zu viele Ampersands usw. hat).
  var fragezeichen = adresse.search(/\?$/);
  if (fragezeichen == -1) adresse += '&';
  adresse = adresse + inhalt + '=' + sammlung[inhalt];
Wir testen mit der Funktion search()21 und einen regulärem Ausdruck10 ob das letzte Zeichen im String ein Fragezeichen ist und speichern das Resultat in der Variable fragezeichen. Wenn dies nicht der Fall ist, ist das Resultat -1 und dies bedeutet, dass schon mindestens ein Variable an der Internet-Adresse hinzugefügt wurde. Darum muss an der Variable adresse ein Ampersand hinzugefügt werden.

Dies macht man mit dem Berechnungs-Operator22 += (oder alternativ mit der Funktion concat()23).
Zu guter letzt wird dann die Variable an der Internet-Adresse gehängt, zusammen mit Fragezeichen, Ampersands und gleich-Zeichen. Die Struktur sieht so aus:

Datei - Fragezeichen - Variablen-Name - gleich-Zeichen - Variablen-Wert
datei.html ? name = wert

Der Internet Explorer7 wandelt die Ampersands automatisch wieder um in Hex-Code, und dieser muss wieder ersetzt werden. Dies machen wir mit der Funktion replace()24 wie weiter oben schon gezeigt.
Und dann kann endlich der Link geöffnet werden. In diesem Beispiel wurde die Funktion open()25 dazu benutzt, man allerdings auch Objekt Location26 verwenden.

Verwendung von Frames

Wenn Sie Frames verwenden, müssen Sie beim Öffnen der Seiten auch der Name des Frames oder Fensters angeben. Sie können auch auf Variablen in andere Frames zugreifen, passen Sie aber auf dass, keine Variable zweimal vorkommen darf. Weiteres finden Sie unten in den Referenzen.
  • Auf Frame verweisen mit der Funktion open(): Punkt 25
  • Auf Frame verweisen mit dem Objekt Location: Punkt 26
  • Frames Namen vergeben: Punkt 27
  • Namen von Frames und Fenster per JavaScript ändern: Punkt 28
  • Auf Variablen und Scripte in andere Frames oder Fenster zugreifen: Punkt 29


Referenzen
  1. Variablen werden verwendet um Daten zeitlich zu speichern: mehr dazu
  2. Cookies sind Dateien die Daten im Browser speichern um diese später wieder verwenden zu können: mehr dazu
  3. Internet-Adressen werden aus verschiedene Teilen zusammen gestellt: mehr dazu
  4. Ein Array ist eine Kette von Variablen Werten: mehr dazu
  5. Bei der Benennung von Variablen müssen Sie einige Regeln in Acht nehmen: mehr dazu
  6. Die Syntax von JavaScript stellt einige Wörter voraus die nicht frei verwendet werden können: mehr dazu
  7. Internet Explorer ist die Browser Software von Microsoft: mehr dazu
  8. HEX-Codes werden verwendet um bestimmte Zeichen per URL weiter zu leiten: mehr dazu
  9. Die Funktion replace() ersetzt Zeichen-Ketten: mehr dazu
  10. Mit reguläre Ausdrücke kann JavaScript verstehen wonach es suchen soll: mehr dazu
  11. Die Funktion split() trennt eine Zeichen-Kette an der Stelle wo ein bestimmtes Zeichen (z.B. Buchstabe "a") gefunden wurde: mehr dazu
  12. Mit einer For-Schleife kann man bestimmen wie oft eine bestimmte Aktion ausgeführt werden soll: mehr dazu
  13. Mehr-dimensionale Arrays haben Elemente die einzeln ein neues Array sind: mehr dazu
  14. Assoziative Arrays werden angesprochen durch Namen: mehr dazu
  15. Variablen müssen deklariert werden: mehr dazu
  16. Links mit HTML bauen: mehr dazu
  17. Sogenannt Ereignisse registrieren eine Aktion des Surfers: mehr dazu
  18. In JavaScript können eigene Funktionen gebaut werden: mehr dazu
  19. Der richtige Gebrauch von Anführungs-Zeichen in JavaScript ist sehr wichtig: mehr dazu
  20. Man unterscheidet globale und lokale Variablen: mehr dazu
  21. Die Funktion search() sucht in einer Zeichen-Kette nach einer Übereinstimmung mit einer gesuchten Zeichen-Kette: mehr dazu
  22. Mit Berechnungs-Operatoren kann man mathematische Berechnungen machen oder auch Zeichen-Ketten verbinden: mehr dazu
  23. Mit der Funktion concat() können Zeichen-Ketten verbunden werden: mehr dazu
  24. Replace() ersetzt in einer Zeichen-Kette einige Zeichen durch andere: mehr dazu
  25. Open() öffnet andere Seiten oder Dateien: mehr dazu
  26. Das Objekt Location gibt Zugriff auf die Internet-Adresse: mehr dazu
  27. Frames Namen vergeben: mehr dazu
  28. Namen von Frames und Fenster per JavaScript ändern: mehr dazu
  29. Auf Variablen und Scripte in andere Frames oder Fenster zugreifen: mehr dazu
  30. Return False: mehr dazu

Code einbauen

Der Code ist recht einfach ein zu bauen. Sie kopieren dazu einfach die zwei untenstehenden Scripte. Beachten Sie dabei, dass das obere Script ganz oben im JavaScript-Teil der Seite stehen soll, sodass die Variablen korrekt deklariert werden.
Die Funktion zum Navigieren, rufen Sie auf mit <a href="" onClick="navigation('Seite.html', 'variable1=wert1&variable2=wert2','löschen leren');return false;"> (beachten Sie die Andeutung return false000, sodass JavaScript-fähige Browser den alternativen Link nicht folgen).
Die Variablen können Sie ansprechen mit sammlung["Variablen_Name"].
query = self.location.search;
sammlung = new Array();

if (query != '')
{
  query = query.substr(1, query.length - 1);
  query = query.replace(/%26/,'&');
  teile = query.split('&');

  for (i = 0; i < teile.length; i++)
  {
  teile[i] = teile[i].split('=');
  sammlung[teile[i][0]] = teile[i][1];
  }
}

function navigation(seite,var_werte,var_leren)
  {
  if (var_werte != '')
    {
      teile = var_werte.split('&');

      for (i = 0; i < teile.length; i++)
      {
      teile[i] = teile[i].split('=');
      sammlung[teile[i][0]] = teile[i][1];
      }
    }

  leren = var_leren.split(' ');
  for (i = 0; i < leren.length; i++)
    {
    sammlung[leren[i]] = '';
    }

  adresse = seite + '?';

  for (var inhalt in sammlung)
    {
    if (sammlung[inhalt] != '')
      {
      var fragezeichen = adresse.search(/\?$/);
      if (fragezeichen == -1) adresse += '&';
      adresse = adresse + inhalt + '=' + sammlung[inhalt];
      var fragezeichen = adresse.search(/\?$/);
      if (fragezeichen == -1) adresse += '&';
      adresse = adresse + inhalt + '=' + sammlung[inhalt];
      }
    }

  adresse = adresse.replace(/%26/,'&');
  open(adresse);
  }


dreamer
Expert
Beitrag vom:
02-12-2004, 16:11:18

Mit einem Formular arbeiten

Sie können auch mit einem Formular arbeiten. Um die Variablen dann in der URL mit zu geben, können Sie das Action-Attribut eines Formulars ändern:

function navigation()
{

document.formular.action = seite;
document.formular.submit();
}

Eine Alternative für nicht-JavaScript-fähige Browser bleibt dann das anfangs definierte Script, bzw. Ziel.

Um die Variablen die der Server verwenden muss zu unterscheiden von denen die der Surfer verwenden soll, können Sie mit PHP die Variablen ansprechen Über $_GET["Variable"] (Surfer) und $_POST["Variable"] (Server).

-----------------------------------------------------


dreamer
Expert
Beitrag vom:
19-11-2004, 13:02:48

Es ist auch möglich die URL erst zu dekodieren, sodass die Sonderzeichen sofort ersetzt werden. Dies geht mit der Funktion decodeURI(), und umgekehrt mit encodeURI().

-----------------------------------------------------


[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04508
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06246
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1154
Comments: 0