 Frameinhalt ändern mit JavaScript
Innerhalb eines Framesets soll beim Anklicken eines Links der Inhalt eines anderen Frames ausgetauscht werden. Bei der Tauschaktion erfolgt die 'Ansprache' hier über den Namen des Frames, der bei der Definition des Framesets vergeben wurde.
|
|
URL als Parameter übergeben
Ein Textlink innerhalb dieser Seite im Frame 'anzeige' soll die Navigationsdatei im Nachbarframe (links) austauschen. Die verbale Anweisung lautet:
Zeige im Frame mit dem Namen "nav" die Datei "navigation02.htm"
Testen sie das Script hier. Diese Seite, die sie gerade betrachten, steht im Frame 'anzeige'.
|
|
Die beiden Verweise tauschen die Navigation links aus.
Zur Zeit wird die Navigation JavaScript 02 angezeigt.
Mit dem zweiten Link wird diese dann wieder zurück geholt.
 Die Navigation JavaScript 03 anzeigen
Die Navigation JavaScript 02 anzeigen
Der JavaScript-Verweis
Der Aufruf der Datei erfolgt nicht als HTML-Link mit dem Attribut 'target' wie
<a target="nav" href="../0-navigation03.htm">Navigation 03</a>
Im Link erfolgt vielmehr der Aufruf einer JavaScript-Funktion. Der Funktion wird die URL der zu tauschenden Seite als Parameter übergeben. Parameter stehen bei einem Funktionsaufruf innerhalb der runden Klammern. In dieser Funktion NavTauschen() steht das Anzeige-Ziel fest.
Diese Funktion ist also ausschießlich auf den Frame mit dem Namen 'nav' ausgerichtet. In der Praxis gäbe es dann mehrere Funktionen, eine für jede Tauschoption. Um die datei im Frame 'oben' zu tauschen würde dann die Funktion ObenTauschen() definiert.
Beispiele für den Funktionsaufruf mit Übergabe des Parameters:
<a href="javascript:NavTauschen('0-navigation03.htm')">Navigation 03</a>
<a onClick="NavTauschen('0-navigation03.htm')" href="#">Navigation 03</a>
Script im Head der Seite notieren
Der Framename ist in dieser Funktion fest integreiert!
<script type="text/javascript" language="JavaScript">
<!-- Begin
function NavTauschen(URL)
{
parent.nav.location.href=URL;
}
// End -->
</script>
Zwei Beispiele für den Einsatz:
- Beispiel 1 wird erst beim Anklicken ausgeführt
- Beispiel 2 wird automatisch beim Einlesen der Seite ausgeführt
Die Funktion erwartet die URL (den Dateinamen) für die Anzeige einer Datei im Frame mit dem Namen "nav".
1) im Body als Link
<a href="javascript:NavTauschen('navigation02.htm')">Textlink</a>
2) im Body als (automatischer) Funktionsaufruf
<script type="text/javascript" language="JavaScript">
<!-- Begin
NavTauschen('navigation02.htm');
// End -->
</script>
Wichtig: Der Dateinamen stehet in eingestrichenen Anführungszeichen (Hochkommas)
Zusatzinfo zur Definition des Framesets
Normalerweise und auch empfehlenswert ist es bei der Definition von Frames jedem Frame gleich einen Namen zuzuordnen. Dann kann man später den Frame auch bei diesem Namen ansprechen.
Frameset definieren und Namen vergeben:
Hier ein Beispiel mit 2 Frames, bei dem für die Frames Namen vergeben wurden.
nav
|
inhalt
|
Frame 1 für die Navigation
mit dem Namen "nav"
Frame 2 für die Inhalte
mit dem Namen "inhalt"
(Ausführlichere Informationen zur Definition von Framesets unter:
Frames - Erkärungen). Hier nur das "Basismodell"
<frameset cols="180,*">
<frame name="nav" src="navigation01.htm">
<frame name="inhalt" src="startseite01.htm">
</frameset>
| 
Home • JavaScript • mehrere Frameinhalte zeitgleich