Webdesign- und Freeware-Tipps
Gleichzeitig mehrere Frames / iframes austauschen bzw. tauschen
Oft kreist in Foren die Frage herum, wie man denn in mehreren Frames gleichzeitg mit nur einem Klick neue Seiten laden kann. Diese Frage möchte ich dir nun einmal beantworten. Man kann diesem Problem nur mit Hilfe von Javascript entgegen gehen. Folgender Code, der im Head-Teil deines HTML-Codes steht, sorgt für die erforderliche Dynamik.
<head> ...<script type="text/javascript">
<!--
function austausch(URL1,F1,URL2,F2,URL3,F3, .. usw.) {
Frame1=eval("parent."+F1);
Frame2=eval("parent."+F2);
Frame3=eval("parent."+F3);
... usw. ...
/*(Der dritte Frame ist optional)*/
Frame1.location.href = URL1;
Frame2.location.href = URL2;
Frame3.location.href = URL3;
... usw. ...
/*(Der dritte Frame ist optional)*/}
//-->
</script>... </head>
Den Namen der Javascript Funktion kannst du beliebig wählen, dazu musst du nur nach dem Wort "function" "austausch" durch den gewünschten Funktionsnamen ersetzen.
Mit dieser Funktion hast du nun die Möglichkeit entweder beliebig viele Frames bei einem Mausklick gleichzeitig zu verändern oder beliebig viele Inline-Frames (sog. iframes) zu ändern.
1. Frames
Wenn du das Script bei Frames benutzt, kommt es auf die Namen der Frames an, damit der Browser den Befehl richtig interpretieren kann. Der Code einer index.htm, die 4 Frames beinhaltet, könnte folgendermaßen aussehen.
<frameset rows="50%,50%" cols="50%,50%" framespacing="0" frameborder="NO" border="0">
<frame src="oben_links.htm" name="oben_links" noresize>
<frame src="oben_rechts.htm" name="oben_rechts" noresize>
<frame src="unten_links.htm" name="unten_links" noresize>
<frame src="unten_rechts.htm" name="unten_rechts" noresize>
</frameset>
Damit bei einem Klick auf einen Link aus einem der 4 Frames 2, 3 oder gar alle 4 Frames mit anderen Dateien geladen werden muss das Java-Script dementsprechend angepasst werden. Je nach Anzahl der auszutauschenden URLs müssen dementsprechend viele Einträge vorhanden sein. Sollen alle 4 Frames ausgetauscht werden muss also Frame3=eval... und Frame3.location.... und dasselbe mit 4 vorhanden sein. Ebenso musst du in der Klammer nach dem Funktionsnamen die Anzahl erhöhen.
Ich habe für dich ein kleines Beispiel (Popup) vorbereitet, durch das du die ganze Sache anschaulich verstehen wirst. ;-)
Der Code für einen Link bei 4 zu tauschenden Seiten lautet folgendermaßen:
<a href="javascript:austausch('seite1.htm','seite1','seite2.htm',
'seite2','seite3.htm','seite3','seite4.htm','seite4')">Link</a>
2. Inline Frames
Iframes sind frei definierbare Bereiche auf einer Seite, in denen andere Seiten angezeigt werden. Das Prinzip des Ändern dieser Seite ist dasselbe wie bei den Frames. Der einzige Unterschied liegt darin, dass wir keinen Code für ein Frameset haben, sondern auf einer Seite Iframes eingebunden haben. Diese müssen jedoch jeweils die richtigen Namen zugewiesen haben.
Zum Iframe:
Der Inlineframe zeigt eine beliebige Webseite (HTML, PHP, ect. - Seite) an und ist nur in seiner Breite und Höhe angepasst.
Der Javascriptcode-Teil aus dem Head-Bereich ist der selbe wie in 1, ebenso der Code vom Link, der die Möglichkeit für den Tausch birgt. Wie schon gesagt benötigen die iframes wie die Frames die richtigen Namen, die dann auch im Code vom Link erscheinen müssen.
Auch hierfür habe ich euch ein Beispiel (Popup) erstellt.
