Fensterln

Eben habt Ihr bereits eine Funktion des window-Objekts im Einsatz gesehen: alert(). Diese Funktion gibt ihren Parameter in einem kleinen Dialogfenster aus. Wie dieses Dialogfenster genau aussieht, ist vom Browser abhängig und kann mit JavaScript leider nicht weiter beeinflußt werden. Ähnlich sind die Funktionen confirm() und prompt(). confirm() erzeugt ein Dialogfenster mit dem übergebenen Text und zwei Buttons, 'OK' und 'Cancel'. Klickt der User auf 'OK', gibt confirm() true zurück, ansonsten false. prompt() bietet unter dem übergebenen Text ein Eingabefeld. Was der User dort eingibt, liefert prompt() als String zurück.

Mit einer Reihe von Unterobjekten des window-Objekts könnt Ihr verschiedene Elemente des Browser-Fensters ein- oder ausschalten. Dieses Beispiel schaltet abwechselnd die Statusleiste aus und wieder ein

<script type="text/javascript">

<!--
function switchStatus()
  {
  window.statusbar.visible = !window.statusbar.visible;
  }
//-->
</script>

Diese Funktion könnt Ihr wie vorhin gezeigt an einen Eventhandler oder mit 'javascript:' an einen Hyperlink koppeln. Das Objekt 'statusbar' ist eine Eigenschaft des window-Objekts und hat seinerseits die Eigenschaft 'visible', die einen Wahrheitswert aufnimmt. Mit Hilfe des NOT-Operators ('!') wird dieser Wahrheitswert bei jedem Aufruf der Funktion gerade umgekehrt (aus, an, aus, an, ...).

Die wohl wichtigste Funktion des window-Objekts ist open(). Mit dieser Funktion könnt Ihr neue Fenster öffnen. Die Funktion braucht drei Parameter: Der erste ist die URL der Seite, die in dem neuen Fenster angezeigt werden soll. Der zweite ist der Titel des neuen Fensters. Leider hat der Internet Explorer mit diesem Parameter so seine Probleme, so daß Ihr hier besser einen leeren String angebt. Der dritte Parameter ist ein String, in dem Ihr verschiedene Optionen zu dem neuen Fenster setzen könnt

<script type="text/javascript">
<!--
 function newWindow()
   {
   var opts = "width=300,height=200,menubar=no,toolbar=no";
   var win = window.open("http://www.splashcomics.de", "", opts);
   win.focus();
   }
//-->
</script>

Der Aufruf dieser Funktion erzeugt ein neues Fenster, in das splashcomics.de geladen wird. Das Fenster ist 300 Pixel breit, 200 Pixel hoch und besitzt keine Menuleiste und keine Werkzeugleiste. Welche Optionen Ihr noch im dritten Parameter setzen könnt, findet Ihr wie gewohnt in einer Referenz. Die open()-Funktion liefert ein Objekt der Klasse window zurück, das das neue Fenster darstellt. Daher könnt Ihr das neue Fenster über die Funktion 'focus()' in den Vordergrund holen.

Damit könnt Ihr beispielsweise ein PopUp-Window programmieren, das beim Klick auf ein Thumbnail das zugehörige große Bild zeigt

<script type="text/javascript">
<!--
 function bigPic(number, width, height)
   {
   // erzeuge die URL des großes Bildes
   var url = "picture"+number+".jpg";
   // erzeuge den Optionen-String für den dritten Parameter
   var options = "menubar=no,toolbar=no,location=no,scrollbars=no";
   options = options + ",width="+width+",height="+height;
   // öffne das Fenster
   var win = window.open(url, "", options);
   win.focus();
   }
//-->
</script>
...

<img src="small01.jpg" onClick="bigPic('01',300,500)">
<img src="small02.jpg" onClick="bigPic('02',250,600)">
<img src="small03.jpg" onClick="bigPic('03',400,400)">

Außerdem hat window ein Unterobjekt namens location. location bietet Euch Zugriff auf die vollständige URI der aktuell angezeigten Webseite. Wichtig ist vor allem die Eigenschaft window.location.href, die die momentan angezeigte URI bzw. URL enthält. Damit könnt Ihr leicht eine Umleitung schreiben

<script type="text/javascript">

<!--
// bestimme den Browser des Users
var browser = navigator.appName;
// lade für diesen Browser optimierte Seite
if (browser=="Netscape")
  window.location.href="index_nn.html";
if (browser=="Microsoft Internet Explorer")
  window.location.href="index_ie.html";
// anderer Browser -> Standard-Seite
window.location.href="index_all.html";
//-->
</script>

Wenn Ihr location.href einen neuen Wert zuweist, wird diese URL automatisch im aktuellen Fenster geladen.

Innerhalb eines Framesets hat jeder Frame ein eigenes window-Objekt. An die window-Objekte eines anderen Frames als den, in dem der Code steht, kommt Ihr mit zwei Möglichkeiten: Die oberste Hierarchie-Ebene (also das komplette Browserfenster) bekommt Ihr mit 'window.top'. Die Hierarchie-Ebene über dem aktuellen Frame ist 'window.parent'. Von da aus könnt Ihr wieder «abwärts klettern». Zur Demonstration soll dieses verschachtelte Frameset dienen

<frameset rows="10%,*" border="1">
  <frame name="top_frame">
  <frameset cols="15%,*" border="1">

    <frame name="nav_frame">
    <frame name="main_frame">
  </frameset>
</frameset>

Wir wollen mit einem Link (in nav_frame) sowohl in top_frame als auch in main_frame ein neues HTML-Dokument laden. Das geht dann mit dieser Funktion

<script type="text/javascript">
<!--
function doubleLink(top_url, main_url)
  {
  // nach ganz oben, dann zu top_frame
  window.top.top_frame.location.href=nav_url;
  // eine Stufe nach oben zum inneren Frameset, dann zu main_frame
  window.parent.main_frame.location.href=main_url;
  }
//-->
</script>