3. Crossbrowser Funktionen / Objekt Erkennung

Die im letzten Kapitel beschriebenen Funktionen leftPos und topPos sind sogenannte Crossbrowser Funktionen. Das heisst: die Funktionen werden in jedem Browser gleich verwendet und gleichen die Unterschiede der Objekt-Modelle selbst aus.
Die meisten DHTML-Entwickler verwendeten früher zu diesem Zweck eine Browser-Erkennung basierend auf dem in jedem Browser zur Verfügung stehenden userAgent-String, der zB für diesen Browser wie folgt aussieht:



In letzter Zeit ist man aber eher zu sogenannter Objekt-Erkennung übergegangen, da die Auswertung über den userAgent-String relativ umständlich ist und dieser ausserdem bei diversen Browsern vom User verändert werden kann. Das heisst man testet ob ein Browser eine Methode kennt oder nicht und fährt abhängig davon fort, im besten Fall testet man einfach ob der Browser die Methode kennt die man einsetzen will.

Objekt Erkennung erzeugt i.A. weniger Code als Browser-Erkennung über den userAgent-String (siehe etwa Netscape's JavaScript Client Sniffer) und ist gleichzeitig wesentlich sicherer, da sich das Objekt-Modell natürlich nicht verändern lässt. Da man aber nicht bei jeder Methode oder jeder Eigenschaft herumtesten will, setzt man eine Browser-Erkennung über Objekte an den Anfang jeglichen Scriptings.

Ein Beispiel wäre es etwa NS4, NS6 und IE wie folgt zu identifizieren:

   if(document.all) {statements for IE4/5}
   else if(document.layers) {statements for NS4}
   else if(document.getElementById) {statements for NS6/Mozilla}
   

Ganz so einfach ist es aber dann doch nicht, da zB. Opera 5 die Methode document.all und auch document.getElementById kennt. Will man also Opera ausschliessen, kann man etwa wie folgt vorgehen indem man Objekt-Erkennung mit userAgent-String-Erkennung verbindet:

   if(document.all && navigator.userAgent.indexOf("Opera")==-1) {statements for IE4/5}
   else if(document.layers) {statements for NS4}
   else if(navigator.userAgent.indexOf("Gecko")!=-1) {statements for NS6/Mozilla}
   

Beide Methoden behandeln IE4 und IE5 gleich. Oftmals ist es jedoch besser IE5 und NS6 gleich zu behandeln, da das Objekt-Modell dieser beiden wesentlich ähnlicher ist, als die der beiden Microsoft-Browser. Da IE5 document.all UND document.getElementById versteht, müssen wir wie folgt vorgehen:

   if(document.getElementById && navigator.userAgent.indexOf("Opera")==-1)
      {statements for NS6 and IE5}
   else if(document.layers) {statements for NS4}
   else if(document.all) {statements for IE4}
   

Meine derzeitige Version der Browser-Erkennung ist eine reine Objekt-Erkennung, die ein paar proprietäre Eigenschaften nutzt:

   var DOM = (document.getElementById)? true : false;
   var OP = (window.opera)? true : false;
   var OP5+ = (OP && DOM)? true : false;
   var NS = (window.outerWidth && !OP)? true : false;
   var NS6+ = (NS && DOM)? true : false;
   var NS4 = (NS && !DOM)? true : false;
   var IE = (document.all && !OP)? true : false;
   var IE5+ = (IE && DOM)? true : false;
   var IE4 = (IE && !DOM)? true : false;                     Anzeige der Variablen
   

In einer Crossbrowser-Funktion wird dann einfach nach diesen Variablen gefragt, etwa so:

   if(NS4) {return document.layers[objectName]}
   else if(IE4) {return document.all[objectName].style}
   else if(DOM) {return document.getElementById(objectName).style}
   else return null;