Werbung einblenden Werbung ausblenden


Home / Tutorials / JavaScript Handbuch / Frameübergreifender Zugriff


Zwei Seiten mit verschiedene Elemente und die jeweils einen JavaScript enthalten
Werte aus einem schwebenden Fenster übernehmen
Mehere Frames auf einmal steuern
Frameübergreifender Zugriff auf Seiten die von unterschiedlichen Domains stammen

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.

Geben Sie die Nettosumme ein . Wählen Sie den Mehrwertsteuersatz: Mwst. angeben

Was das Programm macht ist klar. Man gibt eine Zahl ein, drückt auf den Link "Mwst angeben" und wählt einen Umsatzsteuersatz aus. Anschliessend wird berechnet, wie hoch die Umsatzsteuer ist. Das Programm, dass dies bewerkstelligt, sieht so aus.

<script language="JavaScript">
function showme3()
{
fenster33=window.open("","fenschterle", 'width=300,height=200,scrollbars=yes');
fenster33.document.open();
fenster33.document.write("<html><head><title>JavaScript Werte aus schwebendem Fenster ziehen</title></head> ");
fenster33.document.write("<body>");
fenster33.document.write("<form name='mwstsatz'>");
fenster33.document.write("Geben Sie den Umsatzsteuersatz ein");
fenster33.document.write("<select name=prozent onChange=opener.berechnen();>");
fenster33.document.write("<option value='16'>16 %<option value='7'>7 %");
fenster33.document.write("<option value='21'>21 %</select>");
fenster33.document.write("</body></html>");
fenster33.document.close();
fenster33.focus();
}

function berechnen()
{
prozentsatz=fenster33.document.mwstsatz.prozent
[fenster33.document.mwstsatz.prozent.selectedIndex].value;
umsatz=document.mwst.nettosumme.value
umst=umsatz * prozentsatz/100;

document.getElementById('rindamit10').innerHTML="Bei "+prozentsatz+"% beträgt die Umsatzsteuer "+umst+ " €";
}
</script>

Entscheidend sind nun zwei Dinge. Erstens die Art und Weise, wie aus dem schebwenden Fenster heraus der JavaScript in dem aufrufenden Fenster aufgerufen wird und zweitens, wie die Eingaben des Users aus dem schwebenden Fenster heraus in die das aufrufende Fenster gezogen werden. Aus dem schwebenden Fenster heraus rufen wir den JavaScript mit folgender Syntax auf.

opener.berechnen();

Hierbei verweist opener auf das Fenster, dass das schwebende Fenster geöffnet hat. Die Funktion berechnen() wiederum zieht sich die Eingaben aus dem Formular mit dieser Syntax.

fenster33.document.mwstsatz.prozent[fenster33.document.mwstsatz.prozent.selectedIndex].value

Hierbei ist fenster33 eine Instanz des Windows Objektes.

Mehere Frames auf einmal steuern

Manchmal wünscht man sich, dass man mit einem Click auf einen Hyperlink der Inhalt von zwei Frames ausgetauscht wird. Wer sich jetzt nicht vorstellen kann, von was die Rede ist, der kann mal hier clicken.
Alles klar? Wenn man auf "Seite verdrehen" clickt werden die Seiten ausgetauscht. Der Skript, der das bewirkt, ist sehr simpel und sieht so aus.

<html><head><title>one click two votes</title></head>
<body bgcolor=ffff00>
<script language=JavaScript>
testo="eins";
function wechseln()
{
if(testo=="eins")
{
parent.links.location.href="rechts3.htm";
parent.rechts.location.href="links3.htm";
testo="zwei";
}
else
{
parent.links.location.href="links3.htm";
parent.rechts.location.href="rechts3.htm";
testo="eins";
}
}
</script>
<center><A href=javascript:wechseln()><font color=green size=6>Seiten verdrehen</font></A>
</body>

</html>

Wenn wir mit einem Click auf den Hyperlink die Funktion wechseln() aufrufen, dann weisen wir mit
parent.links.location.href="rechts3.htm"
dem linken Frame die Seite rechts3.htm zu, das ist die Seite die ursprünglich rechts stand und mit
parent.rechts.location.href="links3.htm"
die Seite links3.htm zu, was wiederum die Seite ist, die ursprünglich links stand.

Frameübergreifender Zugriff auf Seiten die von unterschiedlichen Domains stammen

Das ist ein Punkt, der sich besonders schnell abhandeln lässt. Es geht nicht. Ein frameübergreifender Zugriff ist nur möglich, wenn alle Seiten die JavaScriptbestandteile enthalten von einer Domain stammen. Wenn wir also einen Frame dieser Art haben

<html><head><title>one click two votes</title></head>
<frameset rows="20%,80%">
<<frame name=links src=http://www.banane.de/links.htm>
<frame name=rechts src=http://www.melone.de/rechts.htm>
</frameset>
</html>

dann kann man von dem JavaScript in links.htm nicht auf ein Formularelement, Variable, Array etc. zugreifen. Das geht nur, wenn beide Seiten von derselben Domain stammen.

vorhergehendes Kapitel