Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
Vorwort
1 Einführung
2 Mathematische und technische Grundlagen
3 Hardware
4 Netzwerkgrundlagen
5 Betriebssystemgrundlagen
6 Windows
7 Linux
8 Mac OS X
9 Grundlagen der Programmierung
10 Konzepte der Programmierung
11 Software-Engineering
12 Datenbanken
13 Server für Webanwendungen
14 Weitere Internet-Serverdienste
15 XML
16 Weitere Datei- und Datenformate
17 Webseitenerstellung mit (X)HTML und CSS
18 Webserveranwendungen
19 JavaScript und Ajax
20 Computer- und Netzwerksicherheit
A Glossar
B Zweisprachige Wortliste
C Kommentiertes Literatur- und Linkverzeichnis
Stichwort

Jetzt Buch bestellen
Ihre Meinung?

Spacer
IT-Handbuch für Fachinformatiker von Sascha Kersken
Der Ausbildungsbegleiter
Buch: IT-Handbuch für Fachinformatiker

IT-Handbuch für Fachinformatiker
Rheinwerk Computing
1216 S., 6., aktualisierte und erweiterte Auflage, geb.
34,90 Euro, ISBN 978-3-8362-2234-1
Pfeil 19 JavaScript und Ajax
Pfeil 19.1 JavaScript
Pfeil 19.2 JavaScript im HTML-Dokument
Pfeil 19.2.1 Erstes Beispiel: Ausgabe ins Dokument
Pfeil 19.3 Formulare und Event Handler
Pfeil 19.3.1 Erstes Beispiel
Pfeil 19.3.2 Zugriff auf Formulare und ihre Elemente
Pfeil 19.4 Datums- und Uhrzeit-Funktionen
Pfeil 19.4.1 Datums- und Uhrzeit-Methoden
Pfeil 19.4.2 Timeout – die JavaScript-»Stoppuhr«
Pfeil 19.5 Manipulation von Bildern
Pfeil 19.5.1 Erstes Beispiel: Austauschen eines Bildes auf Knopfdruck
Pfeil 19.5.2 Vorausladen von Bildern
Pfeil 19.5.3 Eine gut funktionierende Rollover-Lösung
Pfeil 19.6 Browser- und Fensteroptionen
Pfeil 19.6.1 Browser-Eigenschaften
Pfeil 19.6.2 Automatische Hyperlinks – History und Location
Pfeil 19.6.3 Neue Browserfenster öffnen
Pfeil 19.7 DHTML und DOM
Pfeil 19.7.1 W3C-DOM im Überblick
Pfeil 19.7.2 Eine DOM-Baum-Anzeige
Pfeil 19.7.3 DOM-Anwendung in der Praxis
Pfeil 19.7.4 Dokumentinhalte verändern und austauschen
Pfeil 19.8 Ajax
Pfeil 19.8.1 Die erste Ajax-Anwendung
Pfeil 19.8.2 Datenaustauschformate: XML und JSON
Pfeil 19.8.3 Größeres Beispiel: eine interaktive Länderliste
Pfeil 19.9 Zusammenfassung

Rheinwerk Computing - Zum Seitenanfang

19.6 Browser- und FensteroptionenZur nächsten Überschrift

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.


Rheinwerk Computing - Zum Seitenanfang

19.6.1 Browser-EigenschaftenZur nächsten ÜberschriftZur vorigen Überschrift

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.


Rheinwerk Computing - Zum Seitenanfang

19.6.2 Automatische Hyperlinks – History und LocationZur nächsten ÜberschriftZur vorigen Überschrift

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.


Rheinwerk Computing - Zum Seitenanfang

19.6.3 Neue Browserfenster öffnenZur vorigen Überschrift

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().



Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.

<< zurück




Copyright © Rheinwerk Verlag GmbH 2013
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.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern


  Zum Rheinwerk-Shop
Neuauflage: IT-Handbuch für Fachinformatiker






Neuauflage: IT-Handbuch für Fachinformatiker
Jetzt Buch bestellen


 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchempfehlungen
Zum Rheinwerk-Shop: Java ist auch eine Insel






 Java ist auch
 eine Insel


Zum Rheinwerk-Shop: Linux Handbuch






 Linux Handbuch


Zum Rheinwerk-Shop: Computer Netzwerke






 Computer Netzwerke


Zum Rheinwerk-Shop: Schrödinger lernt HTML5, CSS3 und JavaScript






 Schrödinger lernt
 HTML5, CSS3
 und JavaScript


Zum Rheinwerk-Shop: Windows 8.1 Pro






 Windows 8.1 Pro


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo