Wie macht man das mit dem Öffnen eines neuen Fensters?
|
|
|
Man sagt auch OpenNewWindow dazu.
|
|
|
Fenster 1 |
|
|
Folgender HTML-Text, bestehend aus 7 Zeilen, gehört dazu:
|
|
|
<script language="JavaScript">
<!-- Hide the script from old browsers --
function openNewWin1() {
msgWindow=window.open('essen.htm' ,'meine_Bezeichnung1');
}
// finish hiding -->
</script>
|
Erklärung:
Obiger Text befindet sich komplett im HTML-Kopf (head), er muß aus diesen 7 Zeilen
bestehen, auch } braucht eine eigene Zeile, essen.htm ist die Seite mit Bild die als neues
Fenster geöffnet werden soll, "meine_Bezeichnung1" und alles andere ohne
Leerstellen, in dieser vereinfachten Version erscheint ein komplettes neues Fenster mit
der essen.htm, dies kann man aber einfacher machen, der Link hierzu im Body: JavaScript: openNewWin1
() Achtung! Am Ende stehen 2 Klammern |
|
|
|
Wenn man möchte, dass sich nach dem Klick ein neues Fenster mit einer
gewünschten Seite öffnet, welches man in seinen Eigenschaften definieren kann, muß man
die Zeile 4 folgendermaßen ergänzen (s. unten). Falls man aber möchte, dass außer
width, height, top und left alle anderen Werte auf 0 stehen sollen, genügt die Angabe
dieser vier oder nur einer der vier Optionen und die restlichen sind automatisch 0. Siehe
dazu Fenster 3. |
|
|
|
|
|
|
Fenster 2 |
|
|
Folgender HTML-Text gehört dazu:
|
|
|
<script language="JavaScript">
<!-- Hide the script from old browsers --
function openNewWin2() {
msgWindow=window.open('essen.htm','meine_Bezeichnung2','toolbar=0,location=0,directories=0,status=0,menubar=0,
scrollbars=0,resizable=1,copyhistory=0,width=470,height=320,left=44,top=77');
}
// finish hiding -->
</script>
|
Erklärung:
s. oben für Fenster 1, die 4. Zeile muß hier so lang sein, es darf in HTML kein
Zeilenumbruch erfolgen, (ich hab es hier mal gemacht, sonst wird das Bild zu breit)
ansonsten kann man für jede Option 0 oder 1 angeben, bei mehreren
OpenNewWindow-Funktionen auf einer Seite kann man das natürlich hintereinander einfügen
und muß nicht mehrfach <script> ... und <!--Hide ..> erstellen. Der Link
hierzu im Body: JavaScript: openNewWin2 () |
|
|
|
|
|
|
Fenster 3 |
|
|
Folgender HTML-Text gehört dazu:
|
|
|
<script language="JavaScript">
<!-- Hide the script from old browsers --
function openNewWin3() {
msgWindow=window.open('essen.htm','meine_Bezeichnung3','height=320');
}
// finish hiding -->
</script>
|
Hier genügt es dann nur die die Optionen einzufügen, die man wirklich braucht, zum
Beispiel hier noch width, left, top und resizable:
|
|
|
<script language="JavaScript">
<!-- Hide the script from old browsers --
function openNewWin4() {
msgWindow=window.open('essen.htm','meine_Bezeichnung3','height=320,width=330,top=25,left=25,resizable=1');
}
// finish hiding -->
</script>
|
also Fenster 4 |
|
|
Und was bedeuten die einzelnen Fensteroptionen?
toolbar |
Soll die Toolbar des Fensters sichtbar sein? |
|
resizable |
Soll man das Fenster größer ziehen können? |
location |
Soll die Adressleiste sichtbar sein? |
copyhistory |
? |
directories |
Soll die Link-leiste sichtbar sein? |
width |
Die Breite des Fensters. |
status |
Soll die Statusleiste sichtbar sein? |
height |
Die Höhe des Fensters. |
menubar |
Soll das Menü des Fensters sichtbar sein? |
left |
Der Abstand des Fensters vom linken Rand. |
scrollbar |
Soll man scrollen können? |
top |
Der Abstand des Fensters von oben. |
|
|
|
|
Aber es geht auch ohne Javascript: |
|
|
|
|
|
Folgender Code muss eingefügt werden.
<a href="essen.htm"
onclick="msgWindow=window.open(this.href,'displayWindow','toolbar=no,width=410,height=300,directories=no,status=no,scrollbars=no,resize=no,menubar=no');return false;" target="displayWindow"><img src="../../../bilder/led-rot.gif" width="16" height="16"
border="0"> </a>
Sie sehen, dass wieder die Seite essen.htm, die im gleichen Verzeichnis liegt, im Fenster
410x300 angezeigt werden soll.
Geklickt wird hier auf eine beliebige Grafik (led-rot.gif)
Hier kann man es testen:
|
Es geht auch so:
<a href="essen.htm"
onclick="return
!window.open(this.href, '_blank', 'width=410 height=300')"><imgsrc="../../../bilder/led-rot.gif" width="13" height="13"
border="0"></a>
Hier testen:
|
|
|
|
|
|
|
|