| Lade 2 (oder mehr) Frames mit einem Klick - Javascript Methode |
Zuerst brauchen wir ein paar Zielseiten. Nimm die folgenden und speichere sie in Deinem Arbeitsverzeichnis.
Nebenbei, sie beginnen alle mit z, also stehen sie alle zusammen im Verzeichnis und sind leicht mit einem mal zu finden.
Zuerst bauen wir ein kleines Beispiel. Du brauchst eine Hauptseite, die festlegt, womit man anfängt. Speichere das folgende als master.html...
<HTML>
<HEAD>
<TITLE>Joe and Jackie's friends</TITLE>
</HEAD>
<FRAMESET COLS="25%,75%">
<FRAME SRC="dir.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="zjoe_bill.html" NAME="right_top">
<FRAME SRC="zjoe_ed.html" NAME="right_bottom">
</FRAMESET>
</FRAMESET>
</HTML>
Das ist bis jetzt ganz einfaches HTML. beachte die Frame-Namen. (Wir haben bis jetzt noch nicht dir.html gemacht).
Speichere folgendes als dir.html....
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> </BODY> </HTML>
Füge Javascript in den HEAD ein...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hiding
function multiLoad2(doc1,doc2) {
parent.right_top.location.href=doc1;
parent.right_bottom.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
</BODY>
</HTML>
Mach Dir noch keine Gedanken, was das bewirkt.
Füge den text der Links und Anchor-Tags hinzu. Fülle den HREF Teil noch nicht aus.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hiding
function multiLoad2(doc1,doc2) {
parent.right_top.location.href=doc1;
parent.right_bottom.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P><A HREF="">Joe's friends</A>
<P><A HREF="">Jackie's friends</A>
</BODY>
</HTML>
Jetzt füge den HREF Teil dazu.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hiding
function multiLoad2(doc1,doc2) {
parent.right_top.location.href=doc1;
parent.right_bottom.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P><A HREF="javascript:multiLoad2('zjoe_bill.html', 'zjoe_ed.html')">Joe's friends</A>
<P><A HREF="javascript:multiLoad2('zjackie_amy.html', 'zjackie_joan.html')">Jackie's friends</A>
</BODY>
</HTML>
Jetzt lade die Hauptseite master.html und Dein Beispiel sollte funktionieren.
In Ordnung, was haben wir gemacht? Wie funktioniert das?
Kurz gesagt, wir haben eine Funktion - multiLoad2(). Wir übergeben dieser Funktion Argumente - zjoe_bill.html und zjoe_ed.html. Die Funktion führt diese Argumente aus.
function multiLoad2(doc1,doc2) {
Hier werden zwei Argumente an die Funktion übergeben. Sobald die Funktion sie hat, werden
es Variablen doc1 & doc2, damit kann man sie verändern.
parent.right_top.location.href=doc1;
Plaziere das, was in Variable doc1 steht in den rechten oberen Frame.
parent.right_bottom.location.href=doc2;
Plaziere das, was in Variable doc2 steht in den rechten unteren Frame.
Du kannst das einfach erweitern, um mehrere Frames zu ändern. Füge das in die master.html und speichere es als master2.html...
<HTML>
<HEAD>
<TITLE>Joe and Jackie's friends</TITLE>
</HEAD>
<FRAMESET COLS="25%,75%">
<FRAME SRC="dir2.html">
<FRAMESET ROWS="25%,25%,25%,25%">
<FRAME SRC="zjoe_bill.html" NAME="right1">
<FRAME SRC="zjoe_ed.html" NAME="right2">
<FRAME SRC="zjoe_frank.html" NAME="right3">
<FRAME SRC="zjoe_tom.html" NAME="right4">
</FRAMESET>
</FRAMESET>
</HTML>
(Vergiss nicht, dir.html in dir2.html zu ändern. Wir verwenden eine andere Verzeichnisseite.)
Jetzt füge das zur ursprünglichen dir.html hinzu und speichere es als dir2.html...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hiding
function multiLoad4(doc1,doc2,doc3,doc4) {
parent.right1.location.href=doc1;
parent.right2.location.href=doc2;
parent.right3.location.href=doc3;
parent.right4.location.href=doc4;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P><A HREF="javascript:multiLoad4('zjoe_bill.html', 'zjoe_ed.html', 'zjoe_frank.html', 'zjoe_tom.html' )">Joe's friends</A>
<P><A HREF="javascript:multiLoad4('zjackie_amy.html', 'zjackie_joan.html', 'zjackie_lisa.html', 'zjackie_toni.html' )">Jackie's friends</A>
<P><A HREF="javascript:multiLoad4('zjohn_al.html', 'zjohn_dean.html', 'zjohn_george.html', 'zjohn_ralph.html' )">John's friends</A>
<P><A HREF="javascript:multiLoad4('zjenny_denise.html', 'zjenny_marci.html', 'zjenny_pam.html', 'zjenny_shannon.html')">Jenny's friends</A>
</BODY>
</HTML>
Jetzt lade master2.html , um Dein Werk zu testen.
Probier ein wenig damit herum und es kann sehr mächtig werden. Das Verknüpfen der 2-Frame JS Version und der 4-Frame JS Version überlasse ich Dir. Bezüglich der Version des zufälligen Ladens sprengt das ein bisschen den Rahmen. Ich habe es nur eingefügt, damit Du das Potential von Javascript bei der Frame-Manipulation sehen kannst.
Und so haben wir das Thema des Änderns von mehreren Frames mit einem Klick abgehandelt. Wie schon gesagt, falls möglich verwende die HTML-Methode dafür.