Experiment: Kohlkopf

+Übersicht
+Tools & Links
+HTML-Allgemein
+Tabellen & Layer
-JavaScript/DOM
Browser-Unterschiede
Variablenübergabe
Weiterleitungen
PopUp-Fenster
Dateien auslesen
<select>-Wert ermitteln
Zugriff auf Fenster
2 Aktionen im Formular
<textarea>-Zeichenlimit
statisch positionieren
Bilderwechsel
Image-Preload
Zufallszahlen
+CSS
+Frames
+Diverses


 
Valid CSS!
Valid HTML 4.01!
 
 
zum Provisorium

 > Übersicht der Fragen
   > JavaScript/DOM
     > Variablenübergabe
 
 
Wie übergebe ich Javascript-Variablen an ein Skript in einer neu zu ladenen Seite?
 

Javascript- Variablen kann man über die URL der neu zu ladenden Seite einem sich darin befindenen Skript übergeben.

Dabei hat man die Möglichkeit, innerhalb eines Links die Variablen als Parameter an die Linkadresse anzuhängen, oder die Variablen in versteckten Formularfeldern zu speichern und dieses Formular per GET-Methode zu senden.


Beispiel #1
Variablenübergabe per Formular

Quelltext der Seite mit dem zu sendenden Formular:


<html>
<head>
<title>JS-Variablen per Formular versenden</title>
<script type="text/javascript">
<!--
function fillForm()
{
  document.forms[0].strTitle.value=document.title;
  document.forms[0].strURL.value=document.location;
return true;
}
//-->
</script>
</head>
<body>
 <p>Gebe deinen Namen ein und sende das Formular:</p>
 <form action="test1b.html"method="GET"onsubmit="return fillForm();">
   <input type="text"name="strName"size="15">
   <input type="hidden"name="strTitle">
   <input type="hidden"name="strURL">
   <input type="submit"value="senden">
 </form>
</body>
</html>

Erläuterung:

Die Seite enthält ein Formular mit 3 <input>-Feldern, von welchen 2 versteckt sind.
Vor dem Senden des Formulars wird die Funktion checkInput() aufgerufen, welche den beiden versteckten Formularfeldern als Wert den Titel und die URL der aktuellen Seite zuweist. Diese Werte werden nun ebenfalls mit dem Formular versendet.

Quelltext der Zielseite:


<html>
<head>
<title>JS-Variablen per URL empfangen</title>
</head>
<body>
<script type="text/javascript">
<!--
strGET=String(location.search);
if(strGET!= "")
{
strGET=strGET.substring(1,strGET.length);
strGET=strGET.split('&');
for(z=0;z<strGET.length;++z)
	{
	tmpArray=strGET[z].split('=');
	if(tmpArray[0]=='strName')
		{
		document.writeln(
		'<p>eingegebener Name: '+unescape(tmpArray[1])+'</p>'
		);
		}
	if(tmpArray[0]=='strTitle')
		{
		document.writeln(
		'<p>Titel der Ursprungsseite: '+unescape(tmpArray[1])+'</p>'
		);
		}
	if(tmpArray[0]=='strURL')
		{
		document.writeln(
		'<p>Adresse der Ursprungsseite: <a href="'+unescape(tmpArray[1])+'">'+
		unescape(tmpArray[1])+'</a></p>'
		);
		}
	}
}
//-->
</script>
</body>
</html>

Erläuterung:

In dem Javascript dieser Seite wird eingehend mit location.search()überprüft, ob die aktuell gegebene URL Parameter enthält.
Ist dies der Fall, wird die Zeichenkette, welche diese Parameter enthält weiterverarbeitet. Zu Beginn wird das erste Zeichen daraus entfernt... dies ist ein Fragezeichen und signalisiert lediglich den Beginn der Parameter. Im Folgenden wird aus dieser Zeichenkette anhand des Zeichens & ein Array gebildet.
Die Elemente dieses Arrays werden nun nochmals anhand des Trennzeichens = in Arrays gesplittet.Die so entstandenen Arrays enthalten nunmehr als erstes Element den Namen, und als zweites Element den Wert der übergebenen Variablen, welche zur Kontrolle in der Seite ausgegeben werden.


Beispiel #2
Variablenübergabe per Link

Quelltext der Seite mit den zu übergebenden Variablen


<html>
<head>
<title>JS-Variablen per URL weitergeben</title>
<script type="text/javascript">
<!--
function addVars(obj)
{
  strName  = prompt("Gebe deinen Namen ein","");
  strTitle = document.title;
  strURL   = document.location;
  obj.href+='?strName='+escape(strName)+
  	   '&strTitle='+escape(strTitle)+
  	   '&strURL='+escape(strURL);
}
//-->
</script>
</head>
<body>
 <p>
   Klicke auf den <a href="test1b.html"onclick="addVars(this);">Link</a>!
 </p>
</body>
</html>

Erläuterung:

Die Seite enthält einen normalen Link
Beim Anklicken des Links wird die Funktion AddVars() aufgerufen, welche als erstes ein Fenster zur Eingabe eines Namens öffnet. Daraufhin wird aus dem Namen, der Seitenadresse und dem Dokumententitel eine Zeichenkette erstellt, welche paarweise Variablenname und Variablenwert enthält. Dabei müssen vorher im Gegensatz zu Bsp.#1 im Variablenwert mit ecsape() Zeichen, welche in URL's nicht gestattet sind, kodiert werden.
Die so erzeugte Zeichenkette wird, beginnend mit einem ?, an die Adresse des angeklickten Links angehängt.

Die Verarbeitung der Variablen auf der Zielseite erfolgt dabei genau wie in Beispiel#1!


tip   Die Datenmenge, welche man auf dem in den beiden Beispielen gezeigten Weg weitergeben kann ist beschränkt. Sie kann je nach Browser variieren, im Schnitt kann man dabei von ca. 2kB ausgehen.

 
 
   
beantwortet von
doktormolle
 
 
zum proVisorium Impressum