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

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Rheinwerk Computing
ISBN 3-89842-859-1
gp Kapitel 7 Browserinformationen
  gp 7.1 Browser-Erkennung
  gp 7.2 Weiterleitung

Was man verachten will, das muss man kennen. – Gorch Hans Kinau Fock

Kapitel 7 Browserinformationen

Im gesamten Buch werde ich mich immer wieder mal über die Inkompatibilitäten der Browser beschweren und Sie beschwören, diese immer zu berücksichtigen, um nicht einen möglichen Kunden zu verlieren. Oft werden Alternativen zu inkompatiblen Methoden angeboten, so dass gewisse Features auch auf möglichst vielen Browsern laufen. In diesem Abschnitt wird eine andere, wenngleich seltenere Lösung aufgezeigt. Man kann nämlich versuchen, den Browsertyp und die Browserversion des Benutzers zu erkennen und gewisse Browser auf spezielle Seiten umzuleiten, die für diesen Browser »optimiert« (ein schreckliches Wort) worden sind. Wenn Sie also auf Ihren Seiten die neuesten Effekte verwenden, sollten Sie auf Ihrer Homepage den Browser des Besuchers erkennen und nur Nutzer mit neuen Browsern auf Ihre effektbeladene Seite weiterleiten; der Rest darf eine schlankere, kompatiblere Version der Seiten (die Sie hoffentlich erstellt haben!) betrachten.


Rheinwerk Computing

7.1 Browser-Erkennung  toptop

Die Browser-Erkennung wurde seinerzeit von Netscape praktisch perfektioniert; der »Client Sniffer« war weit bekannt und erkannte fast alle Unterversionen der meisten bekannten JavaScript-fähigen Browser. In der Praxis braucht man das freilich nicht so genau. Oft kann man abfragen, ob ein Browser ein Objekt unterstützt (dazu in späteren Kapiteln mehr), oder es gibt eine Möglichkeit, die Funktionalität auch mit der Urversion, also JavaScript 1.0, nachzubilden (siehe beispielsweise Arrays). Ebenso kann man mit den verschiedenen Werten für das language-Attribut des <script>-Tags operieren, was aber mittlerweile nicht mehr praktikabel ist.

Für die Erkennung der Browserversion gibt es ein eigenes Objekt, navigator. Man braucht davon keine Instanz zu erzeugen, sondern kann direkt darauf zugreifen. Das Objekt hat drei interessante Eigenschaften. Bei drei Browsern, einem Firefox 2.0 (Alpha) unter Windows 2000, einem Internet Explorer 6 unter Windows XP und einem Safari unter Mac  OS X 10.4, haben diese Eigenschaften die in der folgenden Tabelle aufgeführten Werte:


Tabelle 7.1     Werte des navigator-Objekts bei drei exemplarischen Browsern

Eigenschaft Firefox 2.0 Alpha Internet Explorer 6 deutsch Safari deutsch
Netscape Microsoft Internet Explorer Netscape
Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8.1b1) Gecko/20060710 Firefox/2.0b1 Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.0.3705; .NET CLR 1.1.4322; .NET CLR 2.0.50727) Mozilla/5.0 (Macintosh; U; Intel Mac  OS X; en) AppleWebKit/418 (KHTML, like Gecko) Safari/417.9.3
5.0 (Windows; en-US) 4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.0.3705; .NET CLR 1.1.4322; .NET CLR 2.0.50727) 417.9.3

Sie sehen insbesondere, dass man eigentlich mit navigator.appName schon einmal zwischen Netscape und dem Internet Explorer unterscheiden kann. Doch leider gibt sich auch der Safari als Netscape aus. Daher ist es besser, auf navigator.userAgent zurückzugreifen. Diese Eigenschaft hat den Aufbau Mozilla/Versionsnummer und dahinter plattformspezifische Informationen. Bei der Versionsnummer ist der Internet Explorer so ehrlich und gibt (in vielen Versionen) zu, meistens in Sachen JavaScript eine Version hinter dem Netscape-Pendant zurückzuliegen. Der Internet Explorer 5 ist in Sachen JavaScript in etwa auf der Höhe des Netscape Navigator 4, also fängt navigator.userAgent mit Mozilla/4.0 an. Der Internet Explorer 6 jedoch gibt dieselbe Mozilla-Versionsnummer an! Das heißt, man kann von der Zeichenkette hinter Mozilla/ keine direkten Rückschlüsse auf die Browser-Versionsnummer ziehen! Auch die diversen Mozilla-Browser identifizieren sich in navigator.appName als Netscape, weswegen an dieser Stelle immer noch die Unterscheidung zwischen Netscape und Internet Explorer getroffen wird. Der Netscape selbst hat zwar nur noch einen sehr kleinen Marktanteil, doch da der Browser mittlerweile ebenfalls auf Mozilla basiert, kann er mit Firefox & Co. in einen Topf geworfen werden.

In diesem Abschnitt werden nur die Versionsnummern von Mozilla Firefox und Internet Explorer bestimmt. Unter der angegebenen URL finden Sie noch detailliertere Informationen, auch für andere Browser wie etwa Opera.

Wann ist es Firefox (oder ein anderer Mozilla-Browser)?

Wie Sie bereits gesehen haben, kann man mit navigator.appName nicht auf den Browser-Hersteller schließen, auch dann nicht, wenn navigator.user-Agent mit Mozilla beginnt. Aber es gibt ein weiteres Entscheidungskriterium: Alle Mozilla-Browser basieren auf der Gecko-Engine und enthalten so eine Angabe der Machart Gecko/Versionsnummer. Wenn Sie also nach Gecko/ suchen (inklusive des Schrägstrichs) und fündig werden, haben Sie es mit einem Mozilla-Browser zu tun. Vorsicht: Nur nach Gecko zu suchen scheitert, denn darauf passt auch der Safari-Browser.

Hier der entsprechende Code. Beachten Sie, dass der Inhalt von navigator.userAgent der Einfachheit halber mit toLowerCase() in Kleinbuchstaben umgewandelt wird.

var ua = navigator.userAgent.toLowerCase();
var mozillabrowser = (ua.indexOf("gecko/") != –1);

Wann ist es der Internet Explorer?

Der Internet Explorer ist viel einfacher zu erkennen. Wie Sie bereits gesehen haben, schreibt der Internet Explorer in navigator.userAgent seine Versionsnummer in der folgenden Form: MSIE Versionsnummer. Es muss also einfach auf das Vorhandensein der Zeichenkette MSIE geprüft werden bzw. nach der Umwandlung in Kleinbuchstaben auf die Existenz der Zeichenkette msie. Außerdem darf die Zeichenkette opera nicht vorkommen, denn dies identifiziert den Opera-Browser (siehe dazu den nächsten Abschnitt).

var ua = navigator.userAgent.toLowerCase();
var mozillabrowser = (ua.indexOf("gecko/") != –1);
var iebrowser = (ua.indexOf("msie") > –1 && ua.indexOf("opera") == –1);

Wann ist es Opera?

Eine Untersuchung der Werte im navigator-Objekt ergibt bei einem Opera-Browser die folgenden Werte (Testkonfiguration: Opera 9.01 deutsch unter Windows XP):

gp  navigator.appName hat den Wert Opera.
gp  navigator.userAgent hat den Wert Opera/9.01 (Windows NT 5.1; U; de).
gp  navigator.appVersion hat den Wert 9.01 (Windows NT 5.1; U).

In der Praxis werden Sie diese Werte allerdings nicht notwendigerweise erhalten. Der Grund: Opera kann in älteren Versionen so konfiguriert werden, dass er sich beispielsweise als ein Internet Explorer ausgibt.

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 7.1     Opera kann sich auch als einer der beiden großen Browser ausgeben.

Als Internet Explorer »getarnt« liefert der Opera-Browser im navigator-Objekt exemplarisch folgende Werte zurück:

gp  navigator.appName hat den Wert Microsoft Internet Explorer.
gp  navigator.userAgent hat den Wert Mozilla/4.0 (compatible; MSIE 5.0; Windows 2000) Opera 6.01 [de].
gp  navigator.appVersion hat den Wert 4.0 (compatible; MSIE 5.0; Windows 2000).

Sie erkennen also einen Opera-Browser am einfachsten daran, dass Sie in navigator.userAgent die Zeichenkette »Opera« finden:

var ua = navigator.userAgent.toLowerCase();
var mozillabrowser = (ua.indexOf("gecko/") != –1);
var iebrowser = (ua.indexOf("msie") > –1 && ua.indexOf("opera") == –1);
var operabrowser = (ua.indexOf("opera") > –1);

Versionsnummer erkennen

Die Eigenschaft navigator.appVersion enthält die Zeichenkette, die in navigator.userAgent nach Mozilla/ steht, zumindest für Mozilla-Browser. Es gibt hier zwei Möglichkeiten, um die Versionsnummer herauszubekommen. Die erste besteht darin, die Versionsnummer aus navigator.appVersion herauszuschneiden (die Versionsnummer endet vor dem ersten Leerzeichen) und dann mit eval() oder mit einer Multiplikation mit 1 in eine numerische Variable umzuwandeln:

var ua = navigator.userAgent.toLowerCase();
var mozillabrowser = (ua.indexOf("gecko/") != –1);
var iebrowser = (ua.indexOf("msie") > –1 && ua.indexOf("opera") == –1);
var operabrowser = (ua.indexOf("opera") > –1);
var av = navigator.appVersion;
var version = av.substring(0, av.indexOf(" ")) *1;
var version2 = av.substring(0, av.indexOf(".")) *1;

In der Variablen version2 wird die Versionsnummer vor dem Punkt gespeichert, also im obigen Beispiel jeweils 4.

Die neueren Netscape-Versionen (ab 6) und auch die Mozilla-Browser melden sich jeweils mit der Versionsnummer 5.0. Da es keine Version Netscape 5 gab, ist diese Unterscheidung eindeutig. Um eine genauere Versionsnummer zu ermitteln (beispielsweise: 6.2.1), müssten Sie navigator.userAgent bemühen.

Die Versionsnummer eines Netscape/Mozilla-Browsers und auch eines Opera-Browsers, der sich als Opera zu erkennen gibt, wurde nun direkt ermittelt. Beim Internet Explorer muss man etwas trickreicher vorgehen. Ich verzichte an dieser Stelle darauf, mühsam anhand einer umfangreichen Tabelle die Versionsunterschiede zwischen den Internet-Explorer-Versionen herauszuarbeiten; nachfolgend kurz die Regeln, woran man die Versionen 4, 5.x, 6 und 7 erkennt:

gp  IE4: version2 muss 4 sein.
gp  IE5: version2 ist ebenfalls 4, und navigator.userAgent enthält die Zeichenkette »MSIE 5.«.
gp  IE6: version2 ist ebenfalls 4, und navigator.userAgent enthält die Zeichenkette »MSIE 6.«.
gp  IE7: version2 ist ebenfalls 4, und navigator.userAgent enthält die Zeichenkette »MSIE 7.«.

In der folgenden, endgültigen Variante des Codes steht in der Variablen versionsnummer die Versionsnummer des Browsers, also eine ganze Zahl zwischen zwei und sechs:

var ua = navigator.userAgent.toLowerCase();
var mozillabrowser = (ua.indexOf("gecko/") != –1);
var iebrowser = (ua.indexOf("msie") > –1 && ua.indexOf("opera") == –1);
var operabrowser = (ua.indexOf("opera") > –1);
var av = navigator.appVersion;
var version = av.substring(0, av.indexOf(" ")) *1;
var version2 = av.substring(0, av.indexOf(".")) *1;
if (mozillabrowser || operabrowser)
   var versionsnummer = version2;
else if (iebrowser){
   if (version2==4 && ua.indexOf("msie 5") == –1 && ua.indexOf("msie 6") == –1 && ua.indexOf("msie 7") == –1) {
      var versionsnummer = 4;
   } else if (version2==4 && ua.indexOf("msie 5") > –1) {
      var versionsnummer = 5;
   } else if (version2==4 && ua.indexOf("msie 6")>-1) {
      var versionsnummer = 6;
   } else if (version2==4 && ua.indexOf("msie 7")>-1) {
      var versionsnummer = 7;
  }
}

Ab Netscape 6 und in Mozilla gibt es die Eigenschaft navigator. vendorSub, die die Versionsinformationen enthält. Dies ist allerdings eine proprietäre Erweiterung von Netscape/Mozilla.

Sie sehen hier, dass man den Code für den Internet Explorer beim Erscheinen einer neuen Version stets anpassen muss. Zwar könnte man versuchen, eine Gesetzmäßigkeit zu erkennen, und beispielsweise davon ausgehen, dass der Internet Explorer 8 in navigator.userAgent die Zeichenkette MSIE 7 enthalten wird, aber zum einen hatte Microsoft immer mal wieder eine Überraschung bei navigator.userAgent parat, und was spricht zum anderen gegen eine Version 7.5?

 <<   zurück
  
  Zum Katalog
Zum Katalog: JavaScript und AJAX
JavaScript und AJAX
bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: JavaScript






 JavaScript


Zum Katalog: jQuery






 jQuery


Zum Katalog: Einstieg in JavaScript






 Einstieg in JavaScript


Zum Katalog: Responsive Webdesign






 Responsive Webdesign


Zum Katalog: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




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


[Rheinwerk Computing]

Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de