Galileo Computing :: IT-Handbuch für Fachinformatiker

19.6 Browser- und Fensteroptionen

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

19.6.1 Browser-Eigenschaften

Es ist in vielen Skripten erforderlich, verschiedene Varianten von Anweisungen für unterschiedliche Webbrowser, Versionen und Rechnerplattformen zu verwenden. Damit Sie solche sogenannten 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:

navigator.appName ist der Name des Browsers. Mögliche Werte sind etwa Microsoft Internet Explorer oder Mozilla.
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 mithilfe von parseInt() oder auch parseFloat() bearbeitet werden, um die Hauptversion beziehungsweise Unterversion zu ermitteln.
Der Internet Explorer 7.0 unter Windows XP liefert beispielsweise das Ergebnis 4.0(compatible; MSIE 7.0; Windows NT 5.1; i-NavFourF; .NET CLR 1.1.4322; .NET CLR 2.0.50727; InfoPath.2), während Firefox 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.
navigator.userAgent gibt schließlich den Wert aus, den der Browser bei HTTP-Anfragen 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 7.0; Windows NT 5.1; i-NavFourF; .NET CLR 1.1.4322; .NET CLR 2.0.50727; InfoPath.2) an, während Firefox 3.0 sich unter Mac OS X als Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; de; rv:1.9.0.10) Gecko/2009042315 Firefox/3.0.10 meldet.
Dass viele Browser intern »Mozilla« heißen, hat historische Gründe: Der Drache Mozilla war das Maskottchen der ursprünglichen NCSA-Mosaic-Entwickler. Dieser Browser ist der gemeinsame Vorfahr von Netscape, Internet Explorer und dem heutigen Mozilla beziehungsweise Firefox.

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 – historische – Beispiel läuft nur in Browsern ab der Versionsnummer 4.0, die bei den beiden Klassikern Internet Explorer und Netscape erhebliche Neuerungen einführte:

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))  {
   // Mac OS-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.

19.6.2 Automatische Hyperlinks – History und Location

Das Browserfenster-Unterobjekt history enthält eine Liste der bisher besuchten Seiten, bildet also den Verlauf oder die History des Browsers ab.

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

history.back() springt zur vorher besuchten Seite zurück.
history.forward() bewegt sich um eine Seite vorwärts.
history.go(Seitenzahl) bewegt sich in der History um die angegebene Anzahl von Seiten vorwärts (positive Werte) oder 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.

19.6.3 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.

Beachten Sie vor dem eventuellen Einsatz dieses Features, dass die meisten modernen Browser ab Werk einen Popup-Blocker enthalten, der das Öffnen solcher Fenster unterdrückt.

Allgemein wird ein neues Fenster mithilfe 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. Beachten Sie dabei, dass die Liste keinerlei Whitespace enthalten darf.

Die wichtigsten einstellbaren Eigenschaften sind folgende:

menubar – Menüleiste ein- oder ausblenden (mögliche Werte sind hier, wie bei den nachfolgenden Eigenschaften, 1 oder yes für das Einblenden und 0 oder no zum Ausblenden)
toolbars – Symbolleiste(n) ein- oder ausblenden
location – Adressleiste ein- oder ausblenden
directories – allgemeine Link-Leiste(n) ein- oder ausblenden
status – die Statusleiste ein- oder ausblenden
scrollbars – Rollbalken ein- oder ausblenden
width – Fensterbreite in Pixeln
Beim Internet Explorer gibt diese Eigenschaft die nutzbare (innere) Fensterbreite an, bei anderen Browsern dagegen die Gesamtfensterbreite.
innerWidth – innere Breite des Fensters (nicht im Internet Explorer)
height – Höhe in Pixeln; zwischen den Browsern besteht derselbe Unterschied wie bei der Breite.
innerHeight – innere Höhe des Fensters (nicht im Internet Explorer)
resizable – die Größe des Fensters kann durch den Benutzer geändert werden/nicht geändert werden.
screenX – der linke Rand des Fensters soll den in Pixel angegebenen Abstand vom linken Bildschirmrand haben.
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 mithilfe der Methode moveTo(xPos, yPos) an die gewünschte Position zu verschieben.

Hier sehen Sie einige Beispiele für spezielle Fenster:

Das Dokument test.html soll in ein 300 × 300 Pixel großes Fenster geladen werden. Das Fenster soll völlig ohne Bedienleisten, aber mit Rollbalken nach Bedarf ausgestattet sein:
```
var fenster=open ("test.html", "",
"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.

Es soll ein neues, leeres Browserfenster geöffnet werden. Seine innere Größe soll in jedem Browser 200 × 200 Pixel betragen, und es soll nie Rollbalken enthalten:

// Internet Explorer?
var msie = (navigator.appName.indexOf("Microsoft") >= 0)
     ? true : false;
// Fenster-Featureliste basteln:
var features=
     "menubar=0,toolbars=0,location=0,directories=0,
     status=0,scrollbars=0,";
if (msie) {
   features += "width=200,height=200";
} else {
   features += "innerWidth=200,innerHeight=200";
var fenster = open ("", "", features);
}

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 Dokumentobjekts einstellen; beispielsweise die Hintergrundfarbe:
```
fenster.document.bgColor = "#FF0000";
```
Beachten Sie, dass der Zugriff über document.open() und document.close() in einigen älteren 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>");
```

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.html in einem 480 × 360 Pixel großen Fenster anzuzeigen:

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

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

moveTo(x, y) – verschiebt das Fenster an die angegebene Position auf dem Bildschirm (gemessen an seiner linken oberen Ecke).
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.
resizeTo(w, h) – ändert die Fenstergröße nachträglich auf w Pixel Breite und h Pixel Höhe.
resizeBy(dw, dh) – verändert die Breite und die Höhe des Fensters um die jeweils angegebene Pixelanzahl.
focus() – stellt das angesprochene Fenster in den Vordergrund und aktiviert es.
close() – schließt das Fenster.

Andere window-Methoden haben Sie im Verlauf dieses Kapitels bereits kennengelernt, beispielsweise alert() oder setTimeout().

Ihr Kommentar

Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen.

Name
E-Mail
Ihr Kommentar