| Zwei
Seiten mit verschiedene Elemente und die jeweils einen
JavaScript enthalten |
|
Bis jetzt hatten wir nur den Fall, dass der
event handler und der JavaScript, den er aufgerufen hat, sich
auf der selben Seite befanden. Genauso so gut vorstellbar
sind aber Anwendungen, bei denen JavaScript frameübergreifend
zugreifen. Ein Beispiel für so einen Fall kann man betrachten,
in dem man hier
clickt. Wir sehen ein Shopsystem, dass von der Möglichkeit
frameübergreifend auf bestimmte Elemente zuzugreifen,
ausgiebig Gebrauch macht. Dieses Shopsystem ist nicht für
die Praxis sondern wurde aus dikaktischen Gründen entwickelt.
Wer es studieren will, kann es hier
downloaden. Durch alle Handbücher zieht sich wie ein
roter Faden dasselbe Problem. Wenn wir etwas üben wollen,
brauchen wir Material. Wir brauchen also zwei Seiten, die
verschiedene Elemente und jeweils einen JavaScript enthalten,
so dass wir zeigen können, was wir zeigen wollen. Der
Frame, von dem wir ausgehen, sieht so aus.
| 1.Html-Seite in Frame
eingebettet |
2.Html-Seite in Frame
eingebettet |
<html>
<head>
<title>
frameübergreifender Zugriff mit JavaScript
</title>
</head>
<body>
<form name="test1">
Name <input type=text name="banane">
<input type=button value=los onClick=javascript:parent.rechts.hops1()>
</form>
<form name=test2>
Hintergrundfarbe Seite
<select name=hintergrundfarbe_S
onChange=parent.rechts.hops2()>
<option
value="red">
red
<option value="green">
green
</select> <br><br>
Hintergrundfarbe Fläche
<select name=hintergrundfarbe_F
onChange=parent.rechts.hops4()>
<option value="brown">
braun
<option value="gray">
grau
</select>
</form>
</body>
</html> |
<html>
<head>
<title>
frameübergreifender Zugriff mit JavaScript
</title>
</head>
<body>
<script language=JavaScript>
aprikose=new Array();
function hops1()
{
aprikose.push
(parent.links.document.test1.banane.value);
hops3();
}
function hops3()
{
for(i=0;i<aprikose.length;i++)
{
tomate=aprikose.join(" ");
document.getElementById('rindamit')
.innerHTML=tomate;
}
}
function hops2()
{
document.bgColor=parent.links.document.test2.
hintergrundfarbe_S[parent.links.document.test2.
hintergrundfarbe_S.selectedIndex].value;
}
function hops4()
{
document.getElementById("rindamit2")
.style.backgroundColor=parent.links.
document.test2.hintergrundfarbe_F[parent.links.
document.test2.hintergrundfarbe_F.selectedIndex].value;
}
</script>
<div id=rindamit
style="background-color:#CAEBEF;color:#017172;
font-family:Tahoma;font-size:14px;font-weight:bold">
</div>
<div id=rindamit2 style="position:absolute; top:350;
left:30;
font-family:Tahoma;font-size:14px;font-weight:bold">
Dschingtaras Bumtarasa Da
</div>
</body>
</html> |
Diese zwei Seiten werden dann in diesen Frame
eingebettet.
<html><head><title>frameübergreifender
Zugriff mit JavaScript</title></head>
<frameset cols="50%,50%">
<frame name=links src=links.htm>
<frame name=rechts src=rechts.htm>
</frameset>
</html>
Das ganze sieht dann so
aus. Wer will, kann sich das Beispiel
auch downloaden indem er hier
clickt. Was passiert, ist selbsterklärend.
Die JavaScript Funktionen, die die Eingaben des Users in einem
Array abspeichern und sie anschliessend wieder aufblenden,
die Funktionen, die die Hintergrundfarbe der rechten Seite
bzw. des Layers ändern, sitzen im rechten Frame, werden
aber vom linken Frame angesprochen. Umgekehrt zieht sich der
JavaScript die Werte, die er braucht, also die Eingaben des
Users und die Farben, die er gewählt hat aus dem linken
Frame. Der Zugriff auf den Skript wie auch auf die Variablen
ist also frameübergreifend. Die Vorgehensweise ist hierbei
simpel. Es muss lediglich der komplette Pfad angegeben werden.
Vom linken Frame aus können wir den JavaScript im rechten
Frame folgendermassen ansteuern.
parent.rechts.hops1()
Hierbei ist Parent die Wurzel des aktuellen Frames. Hätten
wir mehrer Frames, weil ein Frameset ein anderes Frameset
aufruft, müsste man hier anstatt parent top schreiben,
das wäre dann die Wurzel aller Frames. Rechts wiederum
ist der Name des Frames, wo der JavaScript sitzt. Etwas komplizierter
verhält es sich mit den den Formularelementen und den
Feldern des Formulars, den diese sind Kinder des document
Objektes. Der Zugriff auf die Eingaben des Users in die Textbox
im linken Frame von dem JavaScript im rechten Frame erfolgt
mit dieser Syntax.
parent.links.document.test1.banane.value
Wir sehen also, dass das Formular ein Kind des
document Objektes ist. Die Formularfelder wiederum sind Kinder
des Formulars. By the way. Es sind Fälle denkbar, bei
denen weder bekannt ist, wieviele Formularfelder vorhanden
sind, noch wieviele Formulare überhaupt vorhanden sind.
Das Problem, dass nicht bekannt ist, wieviele Formularfelder
vorhanden sind, kann sich z.B. bei einem Programm ergeben,
bei dem diese Formularfelder dynamisch generiert weden. Ein
Beispiel ist zum Beispiel der oben bereits erwähnte Shop,
den man mit einen click auf Shop
betrachten kann. Die Warenkorb Funktion wird über ein
Formular abgebildet und je mehr Produkte der User bestellt
hat, desto mehr Formularelemente gibt es. Bei der Auswertung
des Warenkorbes sehen wir uns also mit dem Problem konfrontiert,
dass wir über den Namen des Formularfeldes das Formular
nicht ansprechen können, weil wir diesen Namen ja nicht
kennen. Der zweite Fall, der uns gleich veranlassen wird einen
anderen Lösungsanatz zu suchen ist der Fall, dass man
auch die Anzahl der Formular nicht kennt. Auch mit dieser
Problematik ist man konfrontiert, wenn die Formulare datenbankgetrieben
aufgebaut werden. Wenn der User z.B. drei Datensätze
eingegeben hat und jeder dieser Datensätze soll geändert
werden können, dann erhält man, unter Umständen
drei Formulare auf einer Seite. Auch diese Formulare können
wir nicht über den Namen ansprechen, wie dies im Beispiel
oben geschieht. Wir zeigen also einen zweiten Ansatz, mit
dem sich dieses Problem lösen lässt.
| 1.Html-Seite in Frame
eingebettet |
2.Html-Seite in Frame
eingebettet |
<html>
<head>
<title>
frameübergreifender Zugriff mit JavaScript
</title>
</head>
<body>
<form name="test1">
Name
<input type=text name="banane">
<input type=button value=los onClick=javascript:parent.rechts.hops1()>
</form>
<form name=test2>
Hintergrundfarbe Seite
<select name=hintergrundfarbe_S onChange=parent.rechts.hops2()>
<option value="red">
red
<option value="green">
green
</select> <br><br>
Hintergrundfarbe Fläche
<select name=hintergrundfarbe_F onChange=parent.rechts.hops4()>
<option value="brown">
braun
<option value="gray">
grau
</select>
</form>
</body>
</html> |
<html>
<head>
<title>
frameübergreifender Zugriff mit JavaScript
</title>
</head>
<body>
<script language=JavaScript>
aprikose=new Array();
function hops1()
{
aprikose.push(parent.links.document.forms[0][0].value);
hops3();
}
function hops3()
{
for(i=0;i<aprikose.length;i++)
{
tomate=aprikose.join(" ");
document.getElementById('rindamit').innerHTML=tomate;
}
} function hops2()
{
document.bgColor=parent.links.
document.forms[1][0][parent.links.
document.forms[1][0].selectedIndex].value;
}
function hops4()
{
document.getElementById("rindamit2").style.
backgroundColor=parent.links.
document.forms[1][1][parent.links.
document.forms[1][1].selectedIndex].value;
}
</script>
<div id=rindamit
style="background-color:#CAEBEF;color:#017172;
font-family:Tahoma;font-size:14px;font-weight:bold">
</div>
<div id=rindamit2
style="position:absolute; top:350;
left:30;font-family:Tahoma;font-size:14px;
font-weight:bold">Dschingtaras Bumtarasa Da
</div>
</body>
</html>
|
Das Programm sieht identisch aus und macht
auch das gleiche, wie das Programm oben. Wer will, kann es
betrachten, indem er hier
clickt. Es wurde nicht viel geändert.
Lediglich der Zugriff auf die Formularfelder wurde modifiziert.
Der Zugriff auf das Formularfeld im linken Frame mit aus dem
JavaScript im rechten Frame erfolgt jetzt mit
parent.links.document.forms[0][0].value
Wir sehen also, dass JavaScript sowohl die Formulare
als auch die Formularelemente in einem Array hält. Diesen
kann man dann über eine for Schleife auslesen. Wer genau
wissen will, wie das geht, der kann den Shop analysieren,
dort geschieht das.
| Werte
aus einem schwebenden Fenster übernehmen |
|
Es sind Fälle denkbar, bei denen Werte
aus einem schwebenden Fenster in ein Formular Feld des documents
gezogen werden müssen, dass das schwebende Fenster aufgebaut
hat. In dem Beispiel unten z.B kann eine Summe eingegeben
werden. Anschliessend clickt man auf MwSt. berechnen. Ein
Fenster poppt auf, das wissen will, welcher Mehrwertsteuersatz
zugrunde liegt. Hat man ihn eingegeben, zieht das Dokument
das das Fenster aufgepoppt hat, also dieses hier, den eingegebenen
Wert aus dem schwebenden Fenster und berechnet die Summe plus
die Mehrwertsteuer.
