Javascript Tutor - Lektion 16
Javascript und Frames.
Javascript und Frames zusammen sind ein wunderbares Werkzeug. Sie sind eine sehr mächtige Kombination. Hier folgen ein paar schöne Beispiele der Zusammenarbeit von Javascript und Frames...
- FarbWähler (http://www.pagetutor.com/pagetutor/makapage/picker/)
- Das Script ist im linken Frame. Wenn eine Änderung bemerkt wird (oder eine Farbe gewählt wird) wird der rechte Frame komplett mit Javascript neu geschrieben. Selbst beim ersten Laden der Seite wird der rechte Frame mit Javascript geschrieben.
- Druckversion einer Bestellseite (http://www.pagetutor.com/printversion/)
- Was Du bestimmt gleich bemerken wirst ist, dass die Seite eine Frame-Seite ist. Es gibt oben und unten einen Frame, mit 0 Pixel Höhe. Das Script ist in der Master Seite und dirigiert die Unter-Frames. Diese Seite nutzt ein Formular, um die Mail-Informationen zu sammeln. dann nutzt es Javascript, um die Gültigkeit bestimmter Felder, z.B. E-mail Adresse usw., zu überprüfen. Danach wird per Javascript die Kundenbestellseite basierend auf dem Formular erzeugt. Du kannst es gerne ausprobieren. (Das Erzeugen einer Druck-Bestellung führt zu keinem Verkauf, falls Du mir nicht einen Scheck zusendest, also probiere es ausgiebig aus.)
- GateKeeper (http://www.pagetutor.com/keeper/)
- Wenn Du das Beispiel GateKeeper testest, wirst Du sehen, das es aus mehreren Frames besteht, bei denen Javascript die Interaktion regelt und mit Javascript auch die Seiten erstellt werden.
- Praktischer SchriftBetrachter (http://www.pagetutor.com/pagetutor/makapage/dafonts/)
- Wieder eine dynamische Seitenerstellung zwischen den Frames. Alles durch Javascript gesteuert, das durch die Nutzereingaben auswertet.
Als Du damals etwas über Frames gelernt hast, hast Du die BENENNUNG (NAME) von Frames und die Verwendung von ZIELANGABEN (TARGET) gelernt. Nun, Javascript macht genau das selbe... nur auf seine Art.
Erinnerst Du Dich, als wir über die Objekt-Hierarchie gesprochen haben?
window.document.form.input.value
Fenster und Frames verhalten sich ähnlich. Schau Dir mal dieses Frameset an...
<FRAMESET COLS="200,*"> <FRAME SRC="dir.html" NAME="linkerframe"> <FRAME SRC="start.html" NAME="rechterframe"> </FRAMESET>
Das oberste Element ist
window
Stell Dir Frames wie ein Hauptframe mit Kind-Frames darin vor. window ist das Hauptframe.
Das linke Frame ist ein Kind dieses Frames und wir können uns darauf durch einen Namen beziehen...
window.linkerframe
Beachte, dass "linkerframe" vom NAMEN des Frames kommt. Wenn Du Dein Frame "honigtopf" genannt hast, musst Du Dich darauf beziehen mit window.honigtopf. Das selbe gilt für den rechten Frame...
window.rechterframe
Kopiere und speichere dies als links.html...
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> Klicke hier </BODY> </HTML> |
Kopiere und speichere dies als rechts.html...
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> </HTML> |
Und dies als master.html...
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <FRAMESET COLS="200,*"> <FRAME SRC="links.html" NAME="linkerframe"> <FRAME SRC="rechts.html" NAME="rechterframe"> </FRAMESET> </HTML> |
Wir wollen hier erreichen, das der linke Frame in das Dokument im rechten Frame schreibt.
Oh, und weil ich gerade daran denke, man kann nur in ein Dokument schreiben, Du kannst nicht zu einem bereits erstellten Dokument zurück gehen und einen Teil neu schreiben. Wenn Du etwas neu schreiben musst, musst Du das gesamte Dokument von Anfang bis Ende neu schreiben. Es gibt aber neuere DHMTL-Techniken, die das Ändern eines schone erstellten Dokuments gestatten. Dies ist aber jenseits des Ziels der grundlegenden Javascript Anleitung. Du kannst Dir das später mal selber ansehen.
| << Zurück Weiter >> |
 |
|
 |
