Javascript Browser-Erkennung - das Mysterium entschlüsseln

Jeder Web Entwickler, der sich etwas intensiver mit Javascript in Web-Anwendungen befassen muss, kennt das Problem: einzelne Browser - insbesondere aus der Internet Explorer-Familie - benötigen eine Sonderbehandlung. Um den Browser des Internetnutzers zu erkennen und dementsprechend zu behandeln, stehen zwei Ansätze zur Verfügung: das Auslesen der UserAgent-Informationen sowie die Überprüfung auf die Javascript-Fähigkeiten des Browsers.

Den UserAgent auslesen

Das Auslesen der UserAgent-Informationen liefert zwar recht ausführliche Informationen über den Browser inklusive Versionsnummer, allerdings kann der UserAgent erstens vom Benutzer selbst geändert werden und zweitens geben sich diverse Browser auch von sich aus als jemand anderes aus - da tut ein Opera schonmal so, als sei er ein Internet Explorer. Sich auf die UserAgent-Angaben zu verlassen, kann somit zu höchst unerfreulichen Fehlern führen, die den Nutzer unter Umständen dauerhaft vergraulen könnten.

Es geht auch besser

Der zweite Ansatz - die Überprüfung der vorhandenen Javascript-Fähigkeiten - liefert hier in jedem Fall viel gesichertere Ergebnisse. Hierbei wird überprüft, ob der Browser bestimmte Javascript-Methoden oder -Objekte kennt oder nicht kennt. Hieraus kann man sehr sicher ableiten, um welchen Browser es sich handelt.

Mit folgender Abfrage kann man beispielsweise zuverlässig den Internet Explorer 6 indentifizieren:

 
if (document.all && !window.opera && !window.XMLHttpRequest)
{
// Code fuer IE 6 und kleiner
// Info:
// document.all: Das all-Objekt wurde von Microsoft erfunden und wird von Internet Explorer und Opera verstanden -> muss also true sein
// window.opera: dies wird nur von Opera-Browsern erkannt -> muss in diesem Fall also false sein
// window.XMLHttpRequest: dies wird von Internet Explorer erst ab Version 7 erkannt -> muss also false sein 
}
else
{
// Code für andere Browser
}
 

Meist macht es Sinn, direkt auf die im Script benötigten Methoden oder Objekte zu überprüfen. So beispielsweise bei der Event-Registrierung. Hier gibt es zwei komplett unterschiedliche Ansätze von Microsofts Internet Explorer auf der einen und dem W3C auf der anderen Seite. Dies würde man wie folgt lösen:

 
if (document.addEventListener)
{
// Code fuer W3C-konforme Browser (Firefox, Opera, Safari, Chrome etc.) 
// In W3C-konformen Browsern registriert man Events mit object.addEventListener()
}
if (document.attachEvent)
{
// Code fuer die Internet Explorer-Familie
// In Microsoft-Browsern registriert man Events mit object.attachEvent()
}
else
{
// Veralteter DOM-Level-1 Ansatz
// So war es frueher: object.eventhandler = function() {}
}
 

Ein immer wieder hilfreiches Nachschlagewerk für Browsererkennung anhand deren Fähigkeiten ist Kristof Lipferts Browser JS Test.

Screenshot von http://www.lipfert-malik.de

der autor

Tobias Müller

Head of Web Development, strukturiert, implementiert und dirigiert auch anspruchsvollste Webprojekte zu einem gelungenen Finale.