JavaScript Browser check / detection

In manchen Fällen ist es nützlich, wenn genauere Informationen bezüglich des vom Besucher einer Website genutzten Webbrowsers zur Verfügung stehen. Dies gilt insbesondere dann, wenn Inhalte per JavaScript dynamisch integriert oder angepasst werden müssen (per DHTML oder DOM). So kann bei der Erstellung von Internetseiten auf Besonderheiten einzelner Browser eingegangen werden und die entsprechenden Fähigkeiten des jeweiligen Browsers optimal genutzt werden.

Um herauszufinden, welchen Browser ein Anwender nutzt, kann man sich der im JavaScript-Objekt Navigator gespeicherten Informationen bedienen. Dieses Objekt besitzt die Eigenschaft userAgent, in der nähere Informationen zum verwendeten Webbrowser zu finden sind. Die Eigenschaft userAgent enthält eine Zeichenkette, die neben dem Namen und der Version der Browseranwendung auch Informationen zum verwendeten Betriebssystem enthält.

Der erste Code-Abschnitt auf dieser Seite zeigt, wie die benötigten Informationen aus der userAgent-Eigenschaft extrahiert werden können. Bitte beachten Sie, dass diese Möglichkeit der Ermittlung von Browserinformationen relativ unsicher ist, da verschiedene Browser oder Browsererweiterungen die in userAgent gespeicherte Zeichenkette gezielt manipulieren, um die Browseridentität zu verschleiern. Es ist daher stets sicherer den Browser über dessen enthaltene JavaScript-Objekte zu identifizieren.

JavaScript Browsererkennung mit der Klasse BrowserCheck

Im unteren JavaScript-Script wird die Klasse BrowserCheck als Singleton implementiert. Die fertig initialisierte Instanz steht umgehend nach Laden der HTML- bzw.JavaScript-Datei (je nachdem, ob das Script in einer JS-Datei ausgelagert ist oder innerhalb des HTML-Dokuments) zur Verfügung. Mit den Get-Methoden kann die jeweilige Komponente ermittelt werden – darüber hinaus enthält die Klasse keine öffentlichen Funktionen. Das Script verarbeitet die im userAgent-String des Browsers gespeicherten Daten.

Dabei werden mit Hilfe der String-Methoden indexOf(), search und match die Browserstrings auf bekannte Browser untersucht. Die beiden privaten Methoden getBrowserInfo und getOSInfo enthalten die zur Erkennung verschiedener Browser benötigten Daten. In Form von Arrays von Objekten (Variable browserCheck bei Methode searchBrowserInfo bzw. osCheck im Falle von searchOSInfo) sind Zeichenketten und reguläre Ausdrücke gespeichert, nach denen gesucht wird und auf deren Format die Suche – zumindest für Browser, die dem Schema entsprechen – entscheidet, um welchen Browser es sich im jeweiligen Fall handelt.

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Definition eines Objekts, welches Browserinformationen zur Verfügung stellt.
// Die Implementierung erfolgt als Singleton - Initialisierung erfolgt automatisch
// nach dem Laden des Quellcodes und das Objekt steht unter seinem Namen
// (browserInformation) direkt zur Verfügung. Nach Aufruf einer Seite, die das
// Script einbindet, stehen die Informationen über die entsprechenden get-Methoden
// zur Verfügung.
var browserInformation = new function BrowserCheck () {
  // Definition einer privaten Methode searchBrowserInfo, die keine
  // Parameter erwartet.
  // Diese Methode ermittelt Informationen zur Browseranwendung aus der
  // Eigenschaft userAgent des Navigator-Objekts.
  var searchBrowserInfo = function () {
    // Variablen zur Speicherung der emittelten Informationen
    var bname, ver;
    // UserAgent-String aus dem Navigator-Objekt enthält Browserinformationen
    var bs = navigator.userAgent;
    // Zeichenketten zur Identifikation der Browseranwendungen
    // Weitere Browser können erkannt werden, indem die untere Liste entsprechend
    // vervollständigt wird.
    var browserCheck = [ { identification: 'Firefox', name: 'Firefox', version: 'Firefox/\([0-9.]\+\)' },
             { identification: 'Konqueror', name: 'Konqueror', version: 'Konqueror/\([0-9.]\+\)' },
             { identification: 'MSIE', name: 'Internet Explorer', version: 'MSIE \([0-9.]\+\)' },
             { identification: 'Camino', name: 'Camino', version: 'Camino/\([0-9.]\+\)' },
             { identification: 'Opera', name: 'Opera', version: 'Opera/\([0-9.]\+\)' },
             { identification: 'Netscape', name: 'Netscape', version: 'Netscape[0-9]\?/\([0-9.]\+\)' },
             { identification: 'Safari', name: 'Safari', version: 'Safari/\([0-9.]\+\)' },
             { identification: 'Gecko', name: 'Mozilla', version: 'rv:\([0-9.]+\)' }
           ];
    var i = 0;
    // Zur Erkennung des Browsers nacheinander die obere Liste durchgehen bis
    // ein Browser erkannt wurde oder aber die Alternativen ausgehen.
    while (!bname && browserCheck[i]) {
      // Identifikationsstring im User-Agent enthalten?
      if (bs.indexOf (browserCheck[i].identification) != -1) {
        // Browser erkannt: Name des Browsers speichern...
        bname = browserCheck[i].name;
        // und Version des erkannten Browsers ermitteln.
        if (bs.match (RegExp (browserCheck[i].version)) != -1)
          // Versionsstring im UserAgent-String gefunden.
          ver = RegExp.$1;
      }
      i++;
    }
    // Ermittelte Browserinformationen als Objekt mit den Eigenschaften
    // name und version zurückgeben. Was nicht erkannt wurde wird mit
    // der Zeichenkette unbekannt belegt.
    return { name: bname ¦¦ 'unbekannt', version: ver ¦¦ 'unbekannt' };
  }

  // Private Methode zur Ermittlung von Informationen zum genutzten Betriebssystem.
  // Ausgewertet werden Informationen, die im JavaScript-Objekt navigator unter
  // der Eigenschaft userAgent gespeichert sind.
  var searchOSInfo = function () {
    // Variablen zur Speicherung der Inofrmationen zum Betriebssystem
    var os, ver;
    // Verarbeitet werden die in der userAgent-Eigenschaft des navigator-Objekts
    // gespeicherten Informationen.
    var bs = navigator.userAgent;
    // Zeichenketten zur Erkennung der verschiedenen Betriebssysteme
    // Eine entsprechende Erweiterung dieser Liste ermöglicht das Erkennen
    // weiterer Betriebssysteme und deren Versionen.
    var osCheck = [ { identification: 'Win', osname: 'Windows', versions: [ { identification: 'Windows NT 5\.1', name: 'Windows XP' },
                      { identification: 'Win(dows )?95', name: 'Windows 95' },
                      { identification: 'Win(dows )?98', name: 'Windows 98' },
                      { identification: 'Windows NT 4\.0', name: 'Windows NT 4.0' },
                      { identification: 'Windows NT 5\.0', name: 'Windows 2000' },
                      { identification: 'Windows NT 5\.2', name: 'Windows Server 2003' },
                      { identification: 'Windows NT 6\.0', name: 'Windows Vista' } 
                          ] },
        { identification: 'Mac', osname: 'Mac OS', versions: [ { identification: 'Mac', version: '\((PPC\¦Intel) Mac OS X[^;]\*\)'}
                         ] },
        { identification: 'Linux', osname: 'Linux', versions: [ { identification: 'Debian', version: 'Debian-\([^) "]*\)'},
                      { identification: 'Ubuntu', version: 'Ubuntu[-\/]\([^) "]\*\)'},
                      { identification: 'Fedora', version: 'Fedora/\([^) "]\*\)'}
                          ] }
            ];
    var i = 0;
    // Liste der bekannten Betriebssysteme solange abarbeiten, bis das Betriebssystem
    // erkannt wurde oder die Erkennung mangels entsprechender Informationen bzgl.
    // des eingesetzten Betriebssystems fehlschlägt.
    while (!os && osCheck[i]) {
      // Entsprechung mit einem der oberen Systeme gefunden?
      if (bs.indexOf (osCheck[i].identification) != -1) {
        // Grundsätzlicher Typ des Betriebssystems erkannt und dessen Name speichern.
        os = osCheck[i].osname;
        var j = 0;
        // Genauere Versionsangaben über das System ermitteln.
        // Hier wird nach Entsprechungen mit den Versionsangaben aus der
        // oberen Versionsliste des jeweiligen Betriebssystems gesucht.
        while (!ver && osCheck[i].versions[j]) {
          // Bestimmte Version identifizierbar?
          if (bs.search (RegExp (osCheck[i].versions[j].identification)) != -1)
            // Wenn es zu einem System mehrere Varianten gibt (z.B.
            // unterschiedliche Distributionen bei Linux) wird nun
            // versucht genauere Informationen zum System zu ermitteln.
            if (osCheck[i].versions[j].version) {
              // Gefundene Systemvariante speichern...
              ver = osCheck[i].versions[j].identification;
              // und versuchen die Versionsnummer zu ermitteln.
              if (bs.search (RegExp (osCheck[i].versions[j].version)) != -1)
                // Versionsstring erkannt: Speicherung dieser Angaben
                ver += ' ' + RegExp.$1;
            }
            else
            // Ansonsten wird der Name der Betriebssystemversion festgehalten.
              ver = osCheck[i].versions[j].name;
          j++;
        }
      }
      i++;
    }
    // Informationen zum Betriebssystem als Objekt mit den Eigenschaften
    // name und version zurückgeben. Wurden Komponenten nicht erkannt, so
    // liefert die entsprechende Eigenschaft das String unbekannt.
    return { name: os ¦¦ 'unbekannt', version: ver ¦¦ 'unbekannt' };
  }

  // Private Variablen des Objekts
  // Variable zur Speicherung der Browserinformationen.
  // Initialisiert das Objekt mit den ermittelten Browserdaten
  var browser = searchBrowserInfo ();
  // Variable zur Speicherung der Informationen zum Betriebssystem.
  // Initialisiert das Objekt mit Informationen zum genutzten Betriebssystem
  var os = searchOSInfo ();

  // Öffentliche Methoden des Objekts
  // Liefert den Namen des benutzten Browsers
  this.getBrowserName = function () {
    return browser.name;
  }

  // Liefert die Version der Browseranwendung
  this.getBrowserVersion = function () {
    return browser.version;
  }

  // Liefert den Namen des Betriebssystems
  this.getOperatingSystem = function () {
    return os.name;
  }

  // Liefert die Version des Betriebssystems
  this.getOSVersion = function () {
    return os.version;
  }
};
// -->
</script>

JavaScript Browser Detection Beispiel

Der Code-Block unten zeigt, wie die zuvor implementierte Klasse genutzt werden kann um die benötigten Informationen zusammenzutragen. Dabei ist es nicht nötig eine Instanz der Klasse zu erstellen, da sie bereits in initialisiertem Zustand unter dem Namen browserInformation bereit steht. Die ermittelten Werte werden über die Methode write() – einer Methode zur Ausgabe von Zeichenketten, die Bestandteil des vordefinierten JavaScript-Objekts Document ist – im aktuellen HTML-Dokument ausgegeben.

<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Ausgabe der Informationen im aktuellen HTML-Dokument
document.write ('Browser: ' + browserInformation.getBrowserName () + '<br>' +
    'Version: ' + browserInformation.getBrowserVersion () + '<br>' +
    'Betriebssystem: ' + browserInformation.getOperatingSystem () + '<br>' +
    'Version: ' + browserInformation.getOSVersion ());
// -->
</script>

Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht