 PopUp-Window Script für flexible Größe
Das Script 02 soll nun um eine zusätzliche Eigenschaft erweitert werden. Während bisher die Fenstergröße von vorne herein festgelegt war, möchten wir nun auch die Größe des Pop-Up-Windows erst beim Aufruf der JavaScript-Funktion bestimmem.
|
|
PopUp-Window Funktion für flexible Größe
|
Hier wollen wir nun eine Pop-Up-Window-Funktion entwerfen, der wir erst beim Aufruf mitteilen, mit welchen Abmessungen das Window angezeigt werden soll. So schaffen wir eine erweiterte Flexibltät für den Einsatz unseres PopUp-Window-Scripts. Die Entwicklung der neuen Funktion erkläre ich hier ausfühlich.
| |
Diese Parameter wollen wir dem fertigen Script übergeben:
| Dateiname |
dieURL |
Parameter für den Dateinamen |
| Fensterbreite in Pixel |
breite |
Parameter für die Breite des Fensters |
| Fensterhöhe in Pixel |
hoehe |
Parameter für die Höhe des Fensters |
|
Erweiterung des Window-Scripts 02
Während die Größe des Fensters bisher immer noch durch feste Angaben bestimmt wurde, setzen wir nun für Breite und Höhe zwei 'Platzhalter' ein. Wir ändern die Notierung aus dem Beispiel 2 die so aussah:
fenster1=window.open(dieURL,'infofenster','height=400,width=500');
in eine andere Notierung mit flexiblen Angaben für die Abmessungen des Windows
fenster1=window.open(dieURL,'infofenster',flexible Angaben hier);
Zwischenschritt zur Erklärung
Das Script für das Pop-Up-Window benötigt nun zur einwandfreien Funktion neben der Information für den Dateinamen zwei weitere Informationen für Breite und Höhe. Wir definieren diese Variablen außerhalb der eigentlichen Funktion. Die Anweisung zum Öffnen des Fensters könnte später so aussehen:
<script type="text/javascript" language="JavaScript">
<!--
var hoehe = "400";
var breite = "500";
function FensterGroesse(dieURL)
{
fenster1=window.open(dieURL,'Infofenster',Information zur Größe);
}
// -->
</script>
Da die Informationen zur Größe so notiert werden müssen ...
fenster1=window.open(dieURL,'Infofenster','height=400,width=500');
... fasse ich die gewünschten Information zur Größe aus den beiden Variablen 'breite' und 'hoehe' für die erforderliche Notation in einer neuen Variablen 'eigenschaften' zusammen
eigenschaften = "height=" + hoehe + ",width=" + breite";
Die Variable 'eigenschaften' hat dann diesen Inhalt:
eigenschaften = "height=300,width=500";
Zur Erklärung:
<script type="text/javascript" language="JavaScript">
<!--
var hoehe = "400";
var breite = "500";
eigenschaften = "height=" + hoehe + ",width=" + breite;
function FensterGroesse(dieURL,eigenschaften)
{
fenster1=window.open(dieURL,'Infofenster',eigenschaften);
}
// -->
</script>
Würde man die Funktion FensterGroesse() nun aufrufen würde die Eigenschaften für Breite und Höhe den beiden Variablen 'breite' und 'hoehe' entnommen, in die neue Variable 'eigenschaften' übertragen und der Funktion übergeben werden.
Damit haben wir nun die Angaben zur Größe nicht mehr fest innerhalb der Funktion verankert, sondern außerhalb der Funktion festgelegt. Jetzt gehen wir einen Schritt weiter übergeben der Funktion FensterGroesse() nun 3 Infos beim Aufruf.
Sie erinnern sich: Die zu übergebenden Infos nennt man "Übergabeparameter".
- Informationen zum Dateinamen
- Informationen zur Fensterbreite
- Informationen zur Fensterhöhe
Das Script in der entgültigen Version
Erwartet eine Funktion Übergabeparameter, werden diese Parameter beim Aufruf der Funktion innerhalb der Klammern notiert. Hier erwartet die Funktiom 'FensterGroesse()' genau 3 Parameter: Informationen zum Dateinamen, zur Breite und zur Höhe.
Innerhalb der beiden Klammern hinter dem Namen der Funktion tragen wir nun die Namen der 3 Parameter für Dateiname, Breite und Höhe ein. Mit Hilfe dieser Parameter werden die im Aufruf beinhalteten Informationen übergeben.
<script type="text/javascript" language="JavaScript">
<!--
function FensterGroesse(dieURL,breite,hoehe)
{
eigenschaften = "height=" + hoehe + ",width=" + breite;
fenster1=window.open(dieURL,'Infofenster',eigenschaften);
}
// -->
</script>
|
Das Script wird im Head-Bereich der HTML-Datei oder in einer externen JS-Datei notiert und kann bei Bedarf (auch mehrmals) aufgerufen werden. Beim Aufruf müssen wir nun allerdings drei Angaben mittels Platzhalter «übergeben». Das bedeutet, wir teilen der Funktion mit, was im Platzhalter 'dieURL', 'breite' und 'hoehe' steht.
| |
Aufruf im Body
Aufruf der Funktion FensterGroesse() mit Übergabe der Werte (Parameter):
<a href="javascript: FensterGroesse('datei01.htm','500','400',)">öffnen</a>
 öffnen
Diese Funktion kann man nun zur Anzeige unterschiedlicher Dateien in Fenstern unterschiedlicher Größe verwenden. Dazu tragen Sie den entsprechenden Dateinamen und die gewünschte Höhe und Breite im Aufruf der Funktion ein.
<a href="javascript: FensterGroesse('rot.htm','200','300',)">öffnen</a>
öffnen
Aufruf beim Laden der HTML-Datei
Die Funktion kann auch gleich beim Laden der Seite aufgerufen werden!
Damit das Script beim Laden einer Seite automatisch gestartet wird (mit OnLoad), fügen Sie eine entsprechende Anweisung als Ergänzung des <body>-Tags ein. Auch hier wird der Dateiname (steht in Anführungszeichen) übergeben
<body onload="FensterGroesse('rot.htm','200','300')" bgcolor="#FFFFFF" ... >
 PopUp-Window Hintergrundwissen
PopUp-Window definieren 01
PopUp-Window definieren 02
PopUp-Window Attribute
PopUp-Window Standard-Script
PopUp-Window deLuxe
|
Home • PopUp-Windows • PopUp-Window mit flexibler Größe 
Quellcode ;