Window-Script flexible Größe
    
 HomePopUp-Windows • PopUp-Window mit flexibler Größe Quellcode ;

  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








NACH OBEN