infos24 JavaScript > JavaScript Handbuch Das Window Objekt , pop up et alter

Home / Tutorials / JavaScript Handbuch / Das Window Objekt , pop up et alter

Das schwebende Fenster
Die Position des aufpoppenden Fensters festlegen
Die Adresseleiste aufblenden
Die toolbar aufblenden
Die Statuszeile aufblenden
Methoden des Windows Objektes: Die Methode focus()
Methoden des Windows Objektes: Die Methode close()
Die Methode close(): Ein Fenster nach einer gewissen Zeit schliessen
Die Methode moveTo(): Ein Fenster über den Bildschirm wandern lassen

Das schwebende Fenster

nach oben

Der Autor dieses Dokumentes ist ja eigentlich der Meinung, das es zu viele Leute gibt, die einen Hang zum Multimedia Overkill haben. Dass es Leute gibt, die durch technische Spielereien über die Tatsache hinwegtäuschen wollen, dass sie im Grunde nichts zu sagen haben. Es gibt aber auch technologische Verfahren, die eindeutig zu selten eingesetzt werden und hierzu gehören die Pop up Fenster. Es gibt Seiten, die einen auf eine neue Seite weiterleiten, auch wenn diese neue Seite lediglich vier Sätze enthält. In einem solchen Fall ist es günstiger, man schiesst diese Zusatzinformationen in ein Pop up Fenster und lässt den User da wo er ist, damit er anschliessend weiterlesen kann. Besonders zeitraubend und nervtötend ist die Variante, dass eine aus einer Datenbank generierte Treffermaske nur eine Kurzform des Datensatzes anzeigt und man irgendwo clicken muss, um alle Informationen des Datensatzes zu sehen. Gegen data drilling (erst Kurzform und dann kompletter Datensatz) ist erstmal gar nichts einzuwenden, sehr wohl aber gegen die Unsitte, den kompletten Datensatz in ein neues Fenster zu schiessen und die Treffermaske wegzuschiessen. Es ist günstiger, den kompletten Datensatz in ein schwebendes zu schiessen und die Treffermaske stehen zu lassen. Wir gehen davon aus, dass jeder das kennt, wer es noch nie gesehen hat, kann hier clicken. Das Programm ist von faszinierender Einfachheit und sieht so aus.

Bis auf diese zwei Zeilen, dürfte alles klar sein.
1) fenster2=window.open("","fenschterle", 'width=480,height=400,scrollbars=yes');
2) fenster2.focus();
Diese zwei Zeilen sind zwar im Prinzip auch selbserklärend, aber man kann zwei Worte darüber verlieren. 1) kreiert ein neues Window Objekt. Die Methode open des Objektes Window erlaubt es, neue Fenster zu kreieren. Sie hat drei Parameter. Der erste ist in diesem Beispiel leer. Hier kann man, anstatt Inhalt via target reinzuschiessen wie es hier gemacht wird, die Url einer Website eingetragen, so dass diese dann geladen wird. Das sieht dann so aus.

Man kann gerne wieder hier clicken, aber das Resultat ist mit dem obigen völlig identisch, nur dass jetzt die Seite von der Funktion open gezogen und nicht von unten reingedrückt wird. Der zweite Parameter, in unserem Falle fenschterle hat die selbe Funktion wie der Name bei einem Frame. Gibt man via target=fenschterle das aufpoppende Fenster als Ziel an, dann wird das, was man via Hyperlink angibt, in dieses Fenster geschossen. Von dieser Möglichkeit haben wir im ersten Beispiel Gebrauch gemacht. Es ist hierbei unerheblich, ob es sich bei dem, was man reinschiessen will um eine simple HTML Seite handelt oder um das Ergebnis eines serverseitig arbeitenden Programmes. Diese Seite arbeitet zum Beispiel mit einer Suchmaschine, die die ganze Website nach Schlagwörtern durchsucht. Will man die Ergebnisse der Suche in ein aufpoppendes Fenster schiessen, kann man sowas machen.

<html><head><title>Suchmaschine</title>
<script language="JavaScript">
function aufblenden3()
{
fenster2=window.open("","fenschterle", 'width=567,height=200,scrollbars=yes');
fenster2.focus();
}
</script>
</head>
<body>
<form action=suchmaschine.pl target=fenschterle>
<input type=hidden name=modul value=1>
Gesuchte Wörter <input type=text name=wort><br>
Alle <input type=radio name=alle value=ja> oder eines <input type=radio name=alle value=nein checked> finden <br>
<input type=submit value=suchen onClick=aufblenden3></form>
</body></html>

Wer will, kann es ausprobieren.

Am besten gibt man perl oder php ein, denn diese Wörter sind reichhaltig im Angebot. Die Suchmaschine selbst kann man übrigens hier downloaden. Meistens ist die Situation, wenn sowas gebraucht wird aber etwas anders. Meistens ist es eher so, dass man schon weiss, nach was gesucht werden soll, weil eine Datenbankabfrage bereits durchgeführt wurde. In diesem Falle möchte man an das aufgerufene Programm lediglich einen oder mehrere Paramter übergeben, die z.B. den Datensatz, den man sucht eindeutig identifizieren. Das sieht dann so aus.

<html><head><title>Suchmaschine</title>
<script language="JavaScript">
function aufblenden3()
{
fenster2=window.open("","fenschterle", 'width=567,height=200,scrollbars=yes');
fenster2.focus();
}
</script>
</head>
<body>
<A href=http://www.infos24.de/cgi-bin/startseite/suchmaschine.pl?modul=1&wort=xml target=fenschterle onClick=aufblenden()>Nach dem Wort XML in der Website www.infos24.de suchten</a>
</body></html>

Hier werden also die Parameter, die das serverseitig arbeitende Skript braucht, direkt an die Url, als Query String, angehängt.

<A href=http://www.infos24.de/cgi-bin/startseite/suchmaschine.pl?modul=1&wort=xml target=fenschterle onClick=aufblenden5()>Nach dem Wort XML in der Website www.infos24.de suchten</a><br>

Wer das ausprobieren will, der kann auf den unten stehenden Hyperlink clicken.
Nach dem Wort XML in der Website www.infos24.de suchten
Wie deutlich zu sehen, ist das Verfahren ziemlich einfach und es gibt folglich keinen Grund, dem armen User ständig die Treffermaske wegzuschiessen, wenn er sich die Detailansicht eines Datensatzes anschauen will.
Als dritten Parameter übergeben wir die Eigenschaften des Windows Objektes. Hierbei ist folgende Regel zu beachten. Erfolgen keine Angaben, wird ein komplettes Fenster aufgebaut, mit allen Eigenschaften, wie Adressleiste, Menüleiste, Status Leiste etc. Erfolgt aber die Angabe auch nur eines Parameters, dann werden nur die Eigenschaften gezeigt, die tatsächlich angegeben wurden. Exempla statut.

<html><head><title>Suchmaschine</title>
<script language="JavaScript">
function aufblenden3()
{
fenster2=window.open("","fenschterle", "");
fenster2.focus();
}
</script>
</head>
<body>
<A href=http://www.infos24.de/cgi-bin/startseite/suchmaschine.pl?modul=1&wort=xml target=fenschterle onClick=aufblenden()>Nach dem Wort XML in der Website www.infos24.de suchten</a>
</body></html>

Man kann sich auch das wieder anschauen.
Nach dem Wort XML in der Website www.infos24.de suchten Wir erhalten das gleiche wie im Beispiel vorher, allerdings werden die Ergebnisse jetzt in ein komplett ausgestattes Browserfenster geschossen, das im dritten Parameter keine Werte mehr übergeben werden. Ingesamt gibt es etwa 25 Werte, die mit dem dritten Parameter übergeben werden können. Schauen wir uns die wichtigsten an.

Die Position des aufpoppenden Fensters festlegen

nach oben

Unter Umständen will man nicht, dass sich das aufpoppende Fenster irgendwo hinsetzt. Unter Umständen hätte man es gern an einer bestimmten Stelle. Das kann man so erreichen.

Wer es ausprobieren will, kann hier clicken. Wie deutlich zu erkennen, poppt das Fenster jetzt nicht mehr irgendwo auf, sondern so, dass die linke obere Ecke 10 Pixel Abstand hat von oben (top) und 10 Pixel Abstand von links (left) hat. Das funktionniert sowohl mit Netscape als auch mit dem Explorer ab 6.0. Die verschiedenen Menüleisten können eingebaut werden, indem man die entsprechende Leiste angibt und als Wert yes eingibt. Dabei ist

location	Die Adressleiste, also das Eingabefeld für eine URL
toolbar	Ist die Zeile, wo der vor bzw. zurück Button und die anderen Knöpfe zum Navigieren stehen
menubar	Ist die Zeile, wo Datei Bearbeiten Favoriten Extra steht
status	Ist die unterste Zeile des Browsers, also da, wo z.B. die Url steht, wenn man über einen Hyperlink fährt

Veranschaulichen wir das nochmal anhand einiger Beispiele

Die Adresseleiste aufblenden

nach oben

Wer es sehen will, kann hier clicken.

Die toolbar aufblenden

nach oben

Man kann sie aufblenden, indem man sowas macht.

Wer es sehen will, kann hier clicken. (Ein Unterschied zum vorherigen Beispiel ergibt sich nur, wenn das voerherige Fenster geschlossen wird.)

Die Statuszeile aufblenden

nach oben

Die Statuszeile ist, wie bereits erwähnt, die Zeile, in der die Url gezeigt wird, wenn man über einen Hyperlink fährt.

Wer es sehen will, kann hier clicken. (Ein Unterschied zum vorherigen Beispiel ergibt sich nur, wenn das voerherige Fenster geschlossen wird.)

Methoden des Windows Objektes: Die Methode focus()

nach oben

Eine Methode wurde hier schon die ganze Zeit verwendet, nämlich focus(). Diese Funktion ist ausgesprochen wichtig, weil ohne diese Methode nicht gewährleistet ist, dass ein Fenster, dass dadurch iconisiert wurde, dass der User neben das schwebende Fenster geklickt hat, sich wieder aufoppt, wenn er es wieder aufruft. Ohne focus() bleibt es als Icon unten am Bildschirm stehen. Es wird zwar der neue Inhalt reingeschossen, aber es poppt nicht mehr auf, so dass der weniger erfahrene User den Eindruck hat, es passiert nichts. Folglich macht es Sinn, wie hier in allen Beispielen vorgeführt, mit der Methode focus() dafür zu sorgen, dass das Fenster immer wieder aufpoppt.

Methoden des Windows Objektes: Die Methode close()

nach oben

Seltener braucht man close(), weil der User ja auch einfach auf das Kreuz rechts oben im Fenster clicken kann, dann ist das Fenster auch zu. Brauchen könnte man close() wenn man das Fenster nach einer gewissen Zeit schliessen will. Wir zeigen für die beiden Fälle ein Beispiel.
Mit close() ein Fenster schliessen

<A href=beispiele/aufblend.htm onClick=aufblenden10() target=fenschterle>aufblenden</A> <A href=javascript:schliessen()>schliessen</A>

Das Fenster aufblenden: hier clicken.
Das Fenster schliessen: hier clicken.

Die Methode close(): Ein Fenster nach einer gewissen Zeit schliessen

nach oben

Man kann wollen, dass sich ein Fenster nach einer gewissen Zeit schliesst. In JavaScript lässt sich das so realisieren, dass man mit window.setTimeout eine Funktion aufruft, in diesem Falle eben eine, die das Fenster schliesst.

function schliessen()
{
fenster2.close();
}
</script>

Das Fenster aufblenden: hier clicken.

Die Methode moveTo(): Ein Fenster über den Bildschirm wandern lassen

nach oben

Wir betreten das Reich des Multimedia Overkill. Das ist jetzt was für Leute, die nichts zu sagen haben und mit irgendwelchen Gimmicks von dieser Tatsache abzulenken versuchen, bis der User völlig entnervt die Seite verlässt. Unter Umständen erreicht man damit auch ein "Wow, wie geht den das ?", was aber auch nicht hilft, da der User nichts erfährt, was ihn wirklich weiterbringt. Wer es aber partout nicht lassen kann, der kann es machen. Es geht so.

function aufblenden14()
{
fenster2=window.open("","fenschterle", 'width=567,height=200,scrollbars=yes,top=10,left=10,status=yes');
window.setTimeout("weiterruecken()",10);
}

function weiterruecken()
{
fenster2.moveTo(aa,bb);
fenster2.focus();
aa=aa+5;
bb=bb+5;
if(aa <=200)
{
stop=window.setTimeout("weiterruecken()",250);
}
else
{
clearTimeout(stop);
}
}
</script>

Das Fenster aufblenden: hier clicken.

Nachdem wir uns an dem Geflackere nun ausgiebig begeistert haben, können wir den Skript noch kurz durchsprechen, er enthält auch einige sinnvolle Konstrukte. Rufen wir die Funktion aufblenden14() auf, rufen wir mit einer Verzögerung von 10 Millisekunden die Funktion weiterruecken auf. Wir tun das mit
window.setTimeout("funktionsname()",Zahl in Millisekunden);
Das heisst, der erste Parameter, den die Funktion setTimeout() erhält, ist die Funktion, die aufgerufen wird und der zweite Parameter die Zeit in Millisekunden, nach der diese Funktion aufgerufen wird. Ruft sich eine Funktion, wie in diesem Beispiel, immer wieder selber auf, muss es eine Möglichkeit geben, die Funktion auch irgendwann zu stoppen, sonst würde sie ewig weiterlaufen. Hierfür übergeben wir den Rückgabewert der Funktion an die Variable stop, die auch stoppen, anhalten etc. heissen könnte. Wir lasse unsere Funktion also nur solange laufen, wie aa kleiner oder gleich 200 ist. Ist 200 erreicht, beenden wir mit
clearTimeout(stop)
die Funktion. Die Größe eines Fensters verändern: resizeTo()
Hierfür ist sogar eine sinnvolle Anwendung vorstellbar. Hat man z.B. eine Bilderdatenbank und blendet die einzelnen Bilder in Thumbnails auf, auf die man dann drückt und das ganze Bild in einem schwebenden Fenster erhält, dann wäre es nett, wenn das Fenster genauso gross wäre wie das Bild. Man kann das auch anderes lösen, siehe Gästebuch, aber unter Umständen ist die Lösung mit resizeTo sogar überzeugender. Wir zeigen den Ansatz anhand eines vereinfachten Beipiels.

function aufblenden15()
{
fenster2=window.open("","fenschterle", 'width=567,height=200,scrollbars=yes,top=10,left=10,status=yes');
window.setTimeout("grossmachen()",5000);
}

function grossmachen()
{
fenster2.resizeTo(500,500);
fenster2.focus();
}
</script>

Das Fenster aufblenden: hier clicken.

vorhergehendes Kapitel	nach oben	nächstes Kapitel