webdesign » Javascript Tipps » Browseridentifikation

Es gibt verschiedene Möglichkeiten, einen Browser zu identifizieren. Das Navigator Objekt besitzt z. B. die Eigenschaft userAgent, in der Browserinformationen enthalten sind, die analysiert werden können:

Wesentlich ist aber nicht, um welchen Browser es sich handelt, sondern welche Fähigkeiten er hat. Eine bewährte Vorgehensweise ist daher die Identifikation anhand bekannter Objekte und Methoden. Diese Methode schließt auch Probleme mit veränderten userAgent-Strings aus.

Der folgende Code stellt eine Reihe von Variablen zur Verfügung, mit deren boolschem Wert Abfragen programmiert werden können. So ist sichergestellt, das nur solche Objekte und Methoden angesprochen werden, die dem Browser bekannt sind.

Opera 7 wir hier gesondert identifiziert. Zuweilen benötige ich dies, um Besonderheiten von Opera zu berücksichtigen. Meist reicht aber die Unterscheidung zwischen Netscape 4, Internetexplorer 4 und Dom-fähigen Browsern aus.

  /*
  nc    =  Netscape Navigator der vierten Generation
  moz   =  Mozilla basierte Browser wie Netscape 7
  op6   =  Opera 5/6 (kennt document.documentElement nicht)
  op7   =  Opera 7
  ie    =  Alle Internetexplorer
  ie4   =  Internet Explorer der vierten Generation
  ie5Up =  Internet Explorer an Generation 5
  dom   =  Alle Dom-fähigen Browser
  */
  var nc    =  (document.captureEvents  && !document.getElementById)?       1 : 0;
  var moz   =  (document.captureEvents  && document.documentElement)?       1 : 0;
  var op6   =  (document.getElementById && !document.documentElement)?      1 : 0;
  var op7   =  (window.opera && /Opera( |\/)7/i.exec(navigator.userAgent))? 1 : 0;
  var ie    =  document.all? 1 : 0;
  var ie4   =  (document.all            && !document.documentElement)?      1 : 0;
  var ie5Up =  (document.all            && document.documentElement)?       1 : 0;
  var dom   =  document.getElementById? 1 : 0;

Die Fragezeichenkonstruktion stellt eine verkürzte if-else Abfrage dar: vor dem Fragezeichen steht die Bedingung, dahinter die Werte für erfüllt und nicht erfüllt, getrennt durch den Doppelpunkt. Eine Abfrage, z. B. um einen Div-Layer mit der Id test zu positionieren, könnte jetzt folgendermaßen aussehen:

  if (nc)       document.layers["test"].top               =  200;
  else if (ie4) document.all["test"].style.top            =  200;
  else if (dom) document.getElementById("test").style.top =  "200px";