Browserweiche kompakter programmieren

[Stefan]

Hallo,

Ich habe mir mal eine Browserweiche in Javascript zusammengebastelt, die ich gerne etwas kompakter gestalten möchte, um die Ladezeit zu verkürzen (aktuell ist die Weiche 281 Zeilen lang und das finde ich erheblich zu lang).

Hier der gesamte Quelltext:

// // Variablen deklarieren //

var sysWin  = false; var sysMac  = false; var chk     = true; var bNav    = false; var bMsi    = false; var bMoz    = false; var bOpe    = false; var browser = new Array();

// Mozilla

browser["vIsMoz"]    = false; browser["vIsMoz1_0"] = false; browser["vIsMoz1_1"] = false; browser["vIsMoz1_2"] = false; browser["vIsMoz1_3"] = false; browser["vIsMoz1_4"] = false; browser["vIsMoz1_5"] = false; browser["vIsMoz1_6"] = false;

// Internet Explorer

browser["vIsMsi"]  = false; browser["vIsMsi3"] = false; browser["vIsMsi4"] = false; browser["vIsMsi5"] = false; browser["vIsMsi6"] = false;

// Netscape Navigator

browser["vIsNav"]   = false; browser["vIsNav2"]  = false; browser["vIsNav3"]  = false; browser["vIsNav4"]  = false; browser["vIsNav4x"] = false; browser["vIsNav6"]  = false; browser["vIsNav7"]  = false;

// Opera

browser["vIsOpe"]  = false; browser["vIsOpe2"] = false; browser["vIsOpe3"] = false; browser["vIsOpe4"] = false; browser["vIsOpe5"] = false; browser["vIsOpe6"] = false;

// // userAgent auslesen //

var uAgent = navigator.userAgent.toLowerCase();

// // appVersion feststellen //

var vNumber  = parseInt(navigator.appVersion); var vNumber2 = parseFloat(navigator.appVersion);

// // System feststellen //

if ((uAgent.indexOf("win")!= -1) || (uAgent.indexOf("16bit")!= -1))   sysWin = true; else   if (uAgent.indexOf("mac")!= -1)     sysMac = true;

if ((sysWin == false) && (sysMac == false))   sysWin =true;

// // Browser feststellen //

if ((uAgent.indexOf('mozilla') != -1) && (uAgent.indexOf('spoofer')== -1) && (uAgent.indexOf('compatible') == -1) && (uAgent.indexOf('opera') == -1)) {   if ((uAgent.indexOf('rv:1.') != -1) && (uAgent.indexOf("netscape") == -1))     bMoz = true;   else     bNav = true; }

if ((uAgent.indexOf("msie") != -1) && (uAgent.indexOf("opera") == -1))   bMsi = true;

if (uAgent.indexOf("opera") != -1)   bOpe = true;

// // Mozilla-Version //

if (chk && bMoz) {   if (uAgent.indexOf("rv:1.6") != -1)   {     browser["vIsMoz1_6"] = true;     chk                  = false;   }   else     if (uAgent.indexOf("rv:1.5") != -1)     {       browser["vIsMoz1_5"] = true;       chk                  = false;  }  else    if (uAgent.indexOf("rv:1.4") != -1)    {         browser["vIsMoz1_4"] = true;   chk                  = false;    }    else      if (uAgent.indexOf("rv:1.3") != -1)      {           browser["vIsMoz1_3"] = true;           chk = false;         }         else           if (uAgent.indexOf("rv:1.2") != -1)           {             browser["vIsMoz1_2"] = true;             chk                  = false;           }           else             if (uAgent.indexOf("rv:1.1") != -1)             {               browser["vIsMoz1_1"] = true;               chk                  = false;             }             else               if (uAgent.indexOf("rv:1.0") != -1)               {                 browser["vIsMoz1_0"] = true;                 chk                  = false;               }               else               {                 browser["vIsMoz"] = true;                 chk               = false;               } }

// // Netscape Navigator-Version //

if (chk && bNav) {   if (uAgent.indexOf("netscape/7") != -1)   {     browser["vIsNav7"] = true;     chk = false;   }   else     if ((vNumber == 5) && (uAgent.indexOf("netscape6") != -1))     {       browser["vIsNav6"] = true;       chk                = false;     }     else       if ((vNumber >= 4) && (vNumber < 5))       {         browser["vIsNav4x"] = true;   chk                 = false;       }       else         if ((vNumber == 4) && (uAgent.indexOf("netscape4") != -1))         {           browser["vIsNav4"] = true;           chk                = false;         }         else           if (vNumber == 3)           {             browser["vIsNav3"] = true;             chk = false;           }           else             if (vNumber == 2)             {               browser["vIsNav2"] = true;               chk                = false;             }             else               if ((uAgent.indexOf(";nav") != -1) || (uAgent.indexOf("; nav") != -1))               {                 browser["vIsNav"] = true;                 chk               = false;               }               else               {                 browser["vIsNav"] = true;                 chk               = false;               } }

// // Internet Explorer-Version //

if (chk && bMsi) {   if ((vNumber >= 4) && (uAgent.indexOf("msie 6.") != -1))   {     browser["vIsMsi6"] = true;     chk                = false;   }   else     if ((vNumber >= 4) && (uAgent.indexOf("msie 5.") != -1))     {       vNumber == 5;       browser["vIsMsi5"] = true;       chk                = false;     }     else       if (((vNumber == 4) || (vNumber >= 4)) && (uAgent.indexOf("msie 4") != -1))       {         browser["vIsMsi4"] = true;   chk                = false;       }       else         if (vNumber < 4)         {           browser["vIsMsi3"] = true;           chk                = false;         }         else         {           browser["vIsMsi"] = true;           chk               = false;         } }

// // Opera-Version //

if (chk && bOpe) {   if ((uAgent.indexOf("opera 6") != -1) || (uAgent.indexOf("opera/6") != -1))   {     browser["vIsOpe6"] = true;     chk                = false;   }   else     if ((uAgent.indexOf("opera 5") != -1) || (uAgent.indexOf("opera/5") != -1))     {       browser["vIsOpe5"] = true;       chk                = false;     }     else       if ((uAgent.indexOf("opera 4") != -1) || (uAgent.indexOf("opera/4") != -1))       {         browser["vIsOpe4"] = true;         chk                = false;       }       else         if ((uAgent.indexOf("opera 3") != -1) || (uAgent.indexOf("opera/3") != -1))         {           browser["vIsOpe3"] = true;           chk                = false;         }         else           if ((uAgent.indexOf("opera 2") != -1) || (uAgent.indexOf("opera/2") != -1))           {             browser["vIsOpe2"] = true;             chk                = false;           }           else           {             browser["vIsOpe"] = true;             chk               = false;           } }

Wie kann ich den Code kompakter schreiben ?

Gruss, Stefan

[Tobias Kloth]

Hallo Stefan,

Ich habe mir mal eine Browserweiche in Javascript zusammengebastelt,

für was brauchst du die Browserweiche? Warum unterscheidest du die Browser nicht nach ihrem Können?

var uAgent = navigator.userAgent.toLowerCase();

was in navigator.userAgent drinsteht ist irrelevant.

Wie kann ich den Code kompakter schreiben ?

<STRG>+<A> und <DEL> bzw. <ENTF> - macht exakt 0 Zeilen :-)

Grüße aus Nürnberg
Tobias

[Cyx23]

Hallo,

Wie kann ich den Code kompakter schreiben ?

du kannst über die Browserfähigkeiten kompakter und verlässlicher vorgehen, z.B. wie hier http://www.lipfert-malik.de/webdesign/tutorial/bsp/browser_js_test.html, und dann gff. um Teile des useragent, etwa OS, ergänzen. Das JavaScript kann auch verkürzt werden, aber wozu soll es bei dir überhaupt dienen?

Grüsse

Cyx23

[Stefan]

Hallo Cyx23,

Perfekt :-) Danke für den Link.

Stefan

[Struppi]

Ich habe mir mal eine Browserweiche in Javascript zusammengebastelt, die ich gerne etwas kompakter gestalten möchte, um die Ladezeit zu verkürzen (aktuell ist die Weiche 281 Zeilen lang und das finde ich erheblich zu lang).

Absolut.

Ich kann mir keine Szenario vorstellen, wo man soviel Aufwand betreiben müßte um eine dermaßen unzureichende Browser Unterscheidung zu machen.

Für JS reicht es i.d.R. aus einfach auf vorhandene Funktionen zu prüfen

if(typeof Funktion == 'undefined') return;

Für HTML/CSS reicht es oft aus den code valide zu machen um in den meisten Browsern halbwegs vernüftige Ergebnisse zu erzielen.

Struppi.

[Christian Seiler]

Hallo Struppi,

Für JS reicht es i.d.R. aus einfach auf vorhandene Funktionen zu prüfen

if(typeof Funktion == 'undefined') return;

Bei Funktionen oder Objekten ist nicht einmal das notwendig:

if (!document.getElementById) return;
if (!document.forms) return;

Bei Objekten oder Eigenschaften muss man dagegen wirklich typeof nehmen, da !objekt.eigenschaft auch true ist, wenn die Eigenschaft 0 ist (aber existiert).

Viele Grüße,
Christian

[molily]

Hallo,

var browser = new Array();
browser["vIsMoz"]    = false;

Es gibt in JavaScript keine »assoziierten Arrays« in dem Sinne, also Arrays, deren Elemente String-Indizes haben. Dass es dennoch funktioniert, liegt daran, dass ein Array-Objekt vom Typ object ist. Wenn eine Variable nicht gerade vom »primitiven« Type boolean, string oder number ist, funktioniert das Zuweisen von Objekteigenschaften immer. Es sind also keine Array-Elemente, die bei browser['bla']=... entstehen (browser.length bleibt 0), sondern Objekteigenschaften. Das heißt, es ist von diesem Standpunkt aus gesehen letztlich egal, ob du new Array(), new Function(), new Number(), new Boolean(), new String(), new Date() oder new Image() usw. schreibst, es entstehen immer Objekte des Typs object, denen du über browser['bla'] oder browser.bla Eigenschaften hinzufügen kannst. Abgesehen von der Kritik an dem grundlegenden Konzept wäre also wenn überhaupt new Object() bzw. {} angebracht.

Mathias

[Cybaer]

Hi,

browser["vIsMoz"]    = false;
browser["vIsMoz1_0"] = false;

Sinnvoller finde ich, neben "boolschen Browservariablen", "numerische Versionsvariable". So kann man in Verbindung beider - z.B. mit if(BrowserIE==true && VersionIE>=5.0) sehr viel Code einsparen und ist trotzdem flexibler.

Ich halte übrigens zu jedem explizit "erkannten" Browsertyp eine eigene Versionsnummer, um Kontrukte zu realisieren à la: "Benutzt wird der Browser Opera (is_op=true) 7.21 (agt_opVersion=7.21), der sich als IE (is_ie=false) 5.0 (agt_ieVersion=5.0) tarnt" (s. http://Coding.vampirehost.de/Systemvariable).

Gruß, Cybaer