Galileo Computing < openbook >
Galileo Computing - Professionelle Buecher. Auch fuer Einsteiger.
Galileo Computing - Professionelle Buecher. Auch fuer Einsteiger.


Kompendium der Informationstechnik
 von Sascha Kersken
EDV-Grundlagen, Programmierung, Mediengestaltung
Buch: Kompendium der Informationstechnik
gp Kapitel 19 JavaScript
  gp 19.1 JavaScript-Einführung
  gp 19.2 JavaScript im HTML-Dokument
    gp 19.2.1 Erstes Beispiel: Ausgabe ins Dokument
  gp 19.3 Formulare und Event-Handler
    gp 19.3.1 Zugriff auf Formulare und ihre Elemente
    gp 19.3.2 Neufassung des Rechners mit einem Formular
    gp 19.3.3 Die Hintergrundfarbe dynamisch ändern
    gp 19.3.4 Formularauswertung
  gp 19.4 Datums- und Uhrzeit-Funktionen
    gp 19.4.1 Datums- und Uhrzeit-Methoden
    gp 19.4.2 Das Timeout – die JavaScript-»Stoppuhr«
    gp 19.4.3 Ein ausführliches Beispiel
  gp 19.5 Manipulation von Bildern
    gp 19.5.1 Erstes Beispiel: Austauschen eines Bildes auf Knopfdruck
    gp 19.5.2 Vorausladen von Bildern
    gp 19.5.3 Eine gut funktionierende Rollover-Lösung
    gp 19.5.4 Weitere Beispiele
  gp 19.6 Browser- und Fenster-Optionen
    gp 19.6.1 Browser-Eigenschaften
    gp 19.6.2 Automatische Hyperlinks – History und Location
  gp 19.7 DHTML und die Objektmodelle der Browser
    gp 19.7.1 W3C-DOM
    gp 19.7.2 Das klassische Internet-Explorer-Modell
    gp 19.7.3 Das klassische Netscape-Modell
    gp 19.7.4 Browserübergreifende Lösungen
  gp 19.8 Zusammenfassung

gp

Prüfungsfragen zu diesem Kapitel (extern)


Galileo Computing

19.6 Browser- und Fenster-Optionen  downtop

Neben den bereits behandelten Aspekten des HTML-Dokuments sind auch Browserfenster mit verschiedenen Unterobjekten, Eigenschaften und Methoden ausgestattet. Außerdem existieren noch eine Reihe anderer Objekte, die beispielsweise den verwendeten Webbrowser oder die Bildschirmeigenschaften beschreiben. Diese Objekte werden im vorliegenden Abschnitt behandelt.


Galileo Computing

19.6.1 Browser-Eigenschaften  downtop

Es ist in vielen Skripts erforderlich, verschiedene Varianten von Anweisungen für unterschiedliche Webbrowser, Versionen und Rechnerplattformen zu verwenden. Damit Sie solche so genannten Browserweichen schreiben können, müssen Sie zunächst ermitteln, in welchem Browser das Skript gerade läuft.

Der Browser wird über das globale Objekt navigator angesprochen; es besitzt drei Eigenschaften, die nur gelesen, aber nicht geändert werden können:

gp  navigator.appName
ist der Name des Browsers. Mögliche Werte sind etwa Microsoft Internet Explorer oder Netscape.
gp  navigator.appVersion
liefert Informationen über die Version des Browsers (Versionsnummer, Plattform, Betriebssystem und so weiter). Der Wert beginnt grundsätzlich mit der Versionsnummer und kann deshalb mittels parseInt() oder auch parseFloat() bearbeitet werden, um die Hauptversion beziehungsweise Unterversion zu ermitteln.
    Der Internet Explorer 6.0 unter Windows NT liefert beispielsweise das Ergebnis 4.0 (compatible; MSIE 6.0; Windows NT 4.0), während Mozilla den Wert 5.0 (Windows; en-US) zurückgibt. Sie müssen also die Werte dieser Eigenschaften genauer untersuchen, um alle Informationen zu erhalten – beispielsweise ist der Wert 4.0 beim Internet Explorer absolut irreführend.
       
gp  navigator.userAgent
gibt schließlich den Wert aus, den der Browser bei HTTP-Abfragen an Webserver in der Option User-Agent versendet. Dieser Wert ist erst recht mit Vorsicht zu genießen: Erstens »tarnen« sich viele seltener verwendete Browser wie Opera gern als Internet Explorer, zweitens kann der Inhalt selbst je nach Browser ziemlich seltsam sein: Der Internet Explorer gibt beispielsweise den Wert Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 4.0) an, während der »echte« Mozilla die ausführliche Information Mozilla/5.0 (Windows; U; WinNT4.0; en-US; rv:1.2.1) Gecko/20021130 ausgibt.
    Dass viele Browser intern »Mozilla« heißen, hat historische Gründe: »Mozilla« war das Maskottchen der ursprünglichen NCSA-Mosaic-Entwickler. Dieser Browser ist der gemeinsame Vorfahr von Netscape, Internet Explorer und dem heutigen Mozilla (der Open-Source-Version von Netscape).
       

Um nun beispielsweise im Internet Explorer anderen Code auszuführen als in anderen Browsern, können Sie die folgende Browserweiche verwenden:

if (navigator.appName.indexOf ("Microsoft") >= 0)  {
   // Internet-Explorer-Anweisungen
} else {
   // Nicht-MSIE-Anweisungen
}

Das nächste Beispiel läuft nur in Browsern ab der Versionsnummer 4.0, die bei den beiden wichtigsten Browsern in der Tat erhebliche Neuerungen eingeführt hat:

if (parseInt (navigator.appVersion) >= 4)  {
   // Anweisungen für 4er-Browser
} else {
   alert ("Leider ist Ihr Browser zu alt!");
}

Schließlich können Sie folgendermaßen unterscheiden, ob das Skript unter Windows, auf dem Mac oder einer anderen Plattform läuft:

if (navigator.appVersion.match (/win/i))  {
   // Windows-Anweisungen
} else if (navigator.appVersion.match (/mac/i))  {
   // MacOS-Anweisungen
} else {
   // Anweisungen für andere Systeme
}

Mitunter ist es weniger interessant, die aktuelle Browserversion selbst zu ermitteln, als zu überprüfen, ob der Browser ein bestimmtes Feature unterstützt. Einige solcher Tests werden weiter unten im Abschnitt über DHTML verwendet, weil die verschiedenen Browser-Objektmodelle auf diese Weise einfacher ermittelt werden können als über die Browserversion.


Galileo Computing

19.6.2 Automatische Hyperlinks – History und Location  toptop

Das Browserfenster-Unterobjekt history enthält eine Liste der bisher besuchten Seiten, bildet also den Verlauf des Internet Explorers beziehungsweise die History des Netscape Navigators ab.

Mit Hilfe der Methoden dieses Objekts können Sie die Funktionalität der Vorwärts- und Rückwärts-Buttons des Browsers nachbilden:

gp  history.back() springt zur vorher besuchten Seite zurück.
gp  history.forward() bewegt sich um eine Seite vorwärts.
gp  history.go (Seitenzahl) bewegt sich in der History um die angegebene Anzahl von Seiten vorwärts (positive Werte) beziehungsweise rückwärts (negative Werte).

Noch interessanter ist das window-Unterobjekt location, dessen Eigenschaft href verwendet werden kann, um eine neue Seite in das Browserfenster zu laden. Das Verfahren dient mit anderen Worten als automatischer Hyperlink.

Beispielsweise lädt die folgende Anweisung die Website von Google in das aktuelle Fenster:

location.href = "http://www.google.de";

Für die URL, die der Eigenschaft zugewiesen wird, gelten natürlich dieselben Regeln wie bei gewöhnlichen HTML-Hyperlinks.

Zugriff auf Frames

Mit Hilfe der location können Sie auch die Inhalte anderer Fenster oder Frames ändern. Wenn Sie auf Frames zugreifen möchten, können Sie dies über das Objekt top tun, das dem äußersten Frameset entspricht, oder über parent, das unmittelbar übergeordnete Frameset. Die Frames sind Unterobjekte eines solchen Framesets und können entweder numerisch über das Array frames[] angesprochen werden oder anhand des Namens, der ihnen bei der Erstellung im <frame>-Tag zugewiesen wurde.

Die folgende Anweisung lädt die Datei test.htm in das erste Frame des Haupt-Framesets im Browserfenster:

top.frames[0].location.href = "test.htm";

Das erste Frame ist je nach Frameset-Richtung das oberste oder das am weitesten links stehende Frame.

Das nächste Beispiel lädt die Datei mail.htm in ein Frame des Haupt-Framesets mit der Bezeichnung inhalt:

top.inhalt.location.href = "mail.htm";

Mit diesen Anweisungen ist es ein Leichtes, durch einen einzigen Hyperlink die Inhalte mehrerer Frames gleichzeitig auszutauschen, was mit Hilfe von HTML nicht möglich ist.

Fremdes Frameset verlassen

Manche Website-Betreiber setzen die Zielangabe bei Links auf fremde Sites fahrlässig oder sogar absichtlich falsch: Sie laden die externe Seite in ein Frame ihres eigenen Framesets hinein. Um zu verhindern, dass Ihre eigenen Seiten davon betroffen werden, können Sie den folgenden Code in ein Skript im Head Ihrer Startseite setzen:

if (location.href != top.location.href)
   top.location.href = location.href;

Mit anderen Worten: Wenn die Adresse des äußersten Framesets nicht der Adresse des aktuellen Fensters entspricht, ist der Beweis erbracht, dass sich die eigene Seite in einem unerwünschten Frame befindet. In diesem Fall wird sie einfach im obersten Frameset neu geladen.

Eigenes Frameset nachladen

Auch das umgekehrte Problem kann auftreten: Manchmal verlinken Suchmaschinen oder fremde Site-Betreiber einzelne Seiten, die eigentlich Teil eines Framesets sind. Dies können Sie mit Hilfe des folgenden Codes erkennen und daraufhin die Startseite (hier: index.htm) laden:

if (location.href == top.location.href)
   location.href = "index.htm";

Hier ist der unerwünschte Zustand gerade dann gegeben, wenn das aktuelle Fenster und das äußerste Frameset identisch sind.

Neue Browserfenster öffnen

Sehr viele Websites öffnen bestimmte Inhalte in neuen, speziell angepassten Browserfenstern. Beispiele sind etwa die nervigen Werbe-Popups, aber auch Spiele oder Präsentationen, die sich so den passenden Rahmen für ihre Wirkung schaffen.

Allgemein wird ein neues Fenster mit Hilfe einer Anweisung der folgenden Form geöffnet:

RefVar = open (URL, TargetName, FeatureListe);

URL ist ein String, der die URL des Dokuments angibt, das in dieses neue Fenster hineingeladen werden soll. Es gelten dieselben Regeln wie für HTML-Hyperlinks. Falls Sie explizit ein leeres Browserfenster erzeugen möchten, dessen Inhalt dynamisch per JavaScript erstellt wird, ist die passende URL der leere String "".

TargetName, ebenfalls ein String, weist dem neuen Fenster einen Namen zu, der durch das target-Attribut eines Hyperlinks angesprochen werden kann. Beachten Sie, dass die Angabe eines solchen Target-Namens nicht im Zusammenhang mit der URL "" für leere Fenster funktioniert. Falls Sie also die URL leer lassen, sollte auch der Target-Name der leere String sein.

Die FeatureListe ist ebenfalls ein String. Sie enthält eine durch Komma getrennte Liste von Eigenschaft=Wert-Paaren, die bestimmte Einstellungen für das Fenster vornehmen. Bitte beachten Sie, dass die Liste keinerlei Whitespace enthalten darf.

Die wichtigsten einstellbaren Eigenschaften sind folgende:

gp  menubar – Menüleiste ein- oder ausblenden (mögliche Werte sind 1 oder yes für das Einblenden und 0 oder no zum Ausblenden).
gp  toolbars – Symbolleiste(n) ein- oder ausblenden.
gp  location – Adressleiste ein- oder ausblenden.
gp  directories – allgemeine Link-Leiste(n) ein- oder ausblenden.
gp  status – die Statusleiste ein- oder ausblenden.
gp  scrollbars – Rollbalken ein- oder ausblenden.
gp  width – Fensterbreite in Pixeln.
    Beim Internet Explorer gibt diese Eigenschaft die nutzbare (innere) Fensterbreite an, bei Netscape dagegen die Gesamtfensterbreite.
       
gp  innerWidth – innere Breite des Fensters (nur Netscape).
gp  height – Höhe in Pixeln; zwischen den beiden Browsern besteht derselbe Unterschied wie bei der Breite.
gp  innerHeight – innere Höhe des Fensters (nur Netscape).
gp  resizable – die Größe des Fensters kann durch den Benutzer geändert werden/nicht geändert werden.
gp  screenX – der linke Rand des Fensters soll den in Pixel angegebenen Abstand vom linken Bildschirmrand haben.
gp  screenY – der obere Rand des Fensters soll den angegebenen Abstand vom oberen Bildschirmrand haben.
    Leider ist die Angabe von screenX und screenY nicht sehr sicher. Besser ist es, das Fenster nachträglich mit Hilfe der Methode moveTo (xPos, yPos) an die gewünschte Position zu verschieben.
       

Hier sehen Sie einige Beispiele für spezielle Fenster:

gp  Das Dokument test.htm soll in ein 300 x 300 großes Fenster geladen werden. Das Fenster soll völlig ohne Bedienleisten, aber mit Rollbalken nach Bedarf ausgestattet sein:
var fenster=open ("test.htm", "", 
"menubar=0,toolbars=0,location=0,directories=0,
status=0,width=300,height=300");
    Hier wird die scrollbars-Angabe ganz weggelassen, deshalb zeigt das Fenster das Standardverhalten: Rollbalken werden nur dann angezeigt, wenn sie benötigt werden.
       
gp  Es soll ein neues, leeres Browserfenster geöffnet werden; seine innere Größe soll in jedem Browser 200 x 200 Pixel betragen und es soll nie Rollbalken enthalten:
// Netscape?
var nav = (navigator.appName.indexOf ("Netscape") 
   >= 0) ? true : false;
// Fenster-Featureliste basteln:
var features=
     "menubar=0,toolbars=0,location=0,directories=0,
     status=0,scrollbars=0,";
if (nav)
   features += "innerWidth=200,innerHeight=200";
else
   features += "width=200,height=200";
var fenster = open ("", "", features);
gp  Es soll in ein neues, leeres Fenster hineingeschrieben werden:
fenster.document.open ();
fenster.document.write 
     ("Text und <i>HTML</i>!");
    Am Ende der Ausgabe sollte Folgendes stehen:
       
fenster.document.close ();
    document.open() und document.close() entsprechen etwa <body> und </body> in statischen HTML-Dokumenten.
       
    Nach document.open() können Sie auch noch einige Eigenschaften des neuen Dokument-Objekts einstellen; beispielsweise die Hintergrundfarbe:
       
fenster.document.bgColor = "#FF0000";
    Beachten Sie, dass der Zugriff über document.open() und document.close() im Internet Explorer 5 für Macintosh (möglicherweise auch in anderen Browsern) nicht funktioniert. Eine allgemeinere und bessere Variante, die in allen Browsern läuft, verzichtet auf die document.open()- und document.close()-Anweisungen und übergibt dem neuen Fenster stattdessen ein vollständiges, neu erzeugtes HTML-Dokument:
       
var username = document.frm.user.value;
var fenster = open ("", "", 
     "menubar=0,toolbars=0,location=0,directories=0,
     status=0,width=320,height=240");
fenster.document.write 
     ("<html><head><title>
     Das neue Fenster!</title></head>\n");
fenster.document.write 
     ("<body bgcolor=\"#FF0000\" text=\"#FFFFFF\">");
fenster.document.write 
     ("<h1>Hallo, " + username + "!</h1>");
fenster.document.write ("</body></html>");

Die Bildschirmmaße ermitteln

Im Zusammenhang mit separaten Browserfenstern ist noch das globale Objekt screen interessant: Seine Eigenschaften width und height liefern die aktuelle Bildschirmbreite und -höhe in Pixeln, während availWidth und availHeight die Bildschirmmaße abzüglich fester Elemente wie der Windows-Taskleiste oder der Mac-Menüleiste angeben.

Die folgende Funktion nimmt eine URL sowie die gewünschte Höhe und Breite entgegen und öffnet die URL in einem Browserfenster ohne Bedienelemente, das genau in die Bildschirmmitte gesetzt wird:

function customWin (url, w, h)
{
   var screenw = screen.width;
   var screenh = screen.height;
   var xpos = (screenw - w) / 2;
   var ypos = (screenh - h) / 2;
   var mywin = open (url, "",
      "menubar=0,toolbars=0,location=0,directories=0,
      status=0,width=" + w + ",height=" + h);
   mywin.moveTo (xpos, ypos);
   return mywin;
}

Die Funktion gibt eine Referenz auf das neu geöffnete Fenster zurück, damit die aufrufende Stelle weitere Methoden dieses Fensters aufrufen kann.

Der folgende Aufruf verwendet die Funktion, um die Datei spiel.htm in einem 480 x 360 Pixel großen Fenster anzuzeigen:

var spielwin = customWin ("spiel.htm", 480, 320);

Vollbildfenster

Die folgende Funktion öffnet die übergebene URL in einem Vollbildfenster. Dabei wird berücksichtigt, dass nur der Internet Explorer für Windows in der Lage ist, das Fenster über die Bildschirmränder hinaus zu verschieben und damit ein echtes Vollbild zu erzeugen. Alle anderen Browser verwenden einfach die maximal mögliche Bildschirmgröße.

function fullscreen (url)
{
   var win;  // das Fensterobjekt
 
   // Internet Explorer für Windows?
   var ie;     var br = navigator.appName;
   var bv = navigator.appVersion;
   if (br.indexOf ("Microsoft") >= 0 
         && bv.match (/win/i))
      ie = true;
   else
      ie = false;
        if (ie)
   {
      var w = screen.width;
      var h = screen.height;
      w += 4;
      h += 24;
      var features = "width=" + w + ",height=" 
         + h + ",";
      features += 
             "titlebar=0,menubar=0,toolbars=0,location=0,
         directories=0,status=0,resizable=0";
      win = open (url, "", features);
      win.moveTo (-4, -24);
   }
   else
   {
      var w = screen.availWidth - 10;
      var h = screen.availHeight - 30;
      var features = "width=" + w + ",height=" 
         + h + ",";
      features += 
         "titlebar=0,menubar=0,toolbars=0,location=0,
         directories=0,status=0,resizable=0";
      win = open (url, "", features);
      win.moveTo (0, 0);
   }
   return win;
}

Fenster-Methoden

Neben open()sollten Sie auch noch einige Methoden von Fensterobjekten kennen. Die wichtigsten sind folgende:

gp  moveTo (x, y) – verschiebt das Fenster an die angegebene Position auf dem Bildschirm (gemessen an seiner linken oberen Ecke).
gp  moveBy (dx, dy) – verschiebt das Fenster um die angegebene Anzahl von Pixeln. Positive Werte verschieben es nach rechts beziehungsweise unten, negative Werte nach links oder nach oben.
gp  resizeTo (w, h) – ändert die Fenstergröße nachträglich auf w Pixel Breite und h Pixel Höhe.
gp  resizeBy (dw, dh) – verändert die Breite und die Höhe des Fensters um die angegebene Pixelanzahl.
gp  focus() – stellt das angesprochene Fenster in den Vordergrund und aktiviert es.
gp  close() – schließt das Fenster.

Andere window-Methoden haben Sie im Lauf dieses Kapitels bereits kennen gelernt, beispielsweise alert() oder setTimeout().

Werbe-Popups verbannen

Die Methode focus() ist hilfreich, wenn Sie eine preisgünstige oder kostenlose Webpräsenz betreiben, die durch ein Werbe-Popup (teil-)finanziert wird. Der Code zum Einblenden des Popups wird bei der Auslieferung der jeweiligen Seite automatisch vom Webserver eingefügt; dagegen können Sie nichts tun. Aber Sie können zumindest Ihr eigenes Fenster in den Vordergrund setzen: Schreiben Sie in das <body>-Tag den Event-Handler onload="self.focus();" hinein. Bedenken Sie aber bitte, dass Ihr Hoster von den Popups lebt: Verwenden Sie diesen Code nur auf einzelnen Seiten, deren Ästhetik durch das Werbefenster besonders stark gestört würde.

Die Objektreferenz self bezeichnet übrigens (wie ihr Synonym window) das aktuelle Browserfenster. Ein anderer wichtiger Bezug ist das Objekt self.opener – es stellt einen Verweis auf das Browserfenster zur Verfügung, durch das das aktuelle Fenster geöffnet wurde.

Über die Namen anderer Browserfenster oder Frames können Sie mit Hilfe der üblichen Punktschreibweise auch auf deren JavaScript-Objekte, -Funktionen und -Variablen zugreifen. Beispielsweise ruft die folgende Anweisung die Funktion test() im Fenster newwin auf:

newwin.test ();
  

Einstieg in PHP 5

Einstieg in Java

C von A bis Z

Einstieg in C++

Einstieg in Linux

Einstieg in XML

Apache 2




Copyright © Galileo Press GmbH 2004
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Galileo Computing]

Galileo Press GmbH, Gartenstraße 24, 53229 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de