JavaScript: Flinke Möglichkeit den verwendeten Browser zu erkennen

Artikel vom 2. Februar 2009

Aktuelle Browser-Vielfalt und eigenwillige Unterstützung der Web-Standards zwingen Entwickler dazu, den Programmiercode mit ausgefeilten Weichen für die einheitliche Darstellung und korrekte Funktionsweise zu versehen. In den Stylesheets können Deklarierungen mithilfe von CSS-Hacks Browser-spezifisch hinterlegt werden. In Javascript ist die Angelegenheit nicht ganz trivial und so müsste navigator.userAgent abgefragt und abgeglichen werden. Doch es geht auch unbürokratischer und fixer.

jQuery als Helfer
Als Entwickler von WordPress Plugins und Themes greift man bestenfalls auf die jQuery-Bibliothek zu, die WordPress im Auslieferungszustand beinhaltet – dort liegt die Information über den vom Anwender eingesetzten Browser in jQuery.browser jederzeit zum Abruf bereit. Findet jQuery im Plugin oder Theme jedoch keinen anderweitigen Einsatz, so lohnt es sich meistens nicht, nur wegen einer Browser-Abfrage die nicht ganz winzige JavaScript-Library in die Blogseite zu laden.

Knapp und rasant
Nachfolgend werden sehr smarte und zuverlässig funktionierende JS-Techniken für die Browser-Erkennung vorgestellt – ohne Prüfungen des UserAgent. Beispielsweise lässt sich der Internet Explorer in nur 12 Bytes identifizieren. Film ab!

// Firefox 2/3
FF=/a/[-1]=='a'

// Firefox 3
FF3=(function x(){})[-5]=='x'

// Firefox 2
FF2=(function x(){})[-6]=='x'

// Internet Explorer 6/7/8:
IE='\v'=='v'

// Safari:
Saf=/a/.__proto__=='//'

// Chrome
Chr=/source/.test((/a/.toString+''))

// Opera
Op=/^function \(/.test([].sort)

// Erkennung in einer Zeile
B=(function x(){})[-5]=='x'?'FF3':(function x(){})[-6]=='x'?'FF2':/a/[-1]=='a'?'FF':'\v'=='v'?'IE':/a/.__proto__=='//'?'Saf':/s/.test(/a/.toString)?'Chr':/^function \(/.test([].sort)?'Op':'Unknown'

Quelle: THE SPANNER

[Der Autor] Sergej Müller ist enthusiastischer Software Engineer mit Schwerpunkten Webentwicklung und WordPress. Seit 2007 programmiert und vertreibt er wpSEO, das weltberühmte und patentierte SEO-Plugin für WordPress-Blogs.

13 Kommentare zum Artikel

544 Tage zuvor | #1 ocean90

Wenn Javascript deaktiviert ist, nützt das doch relativ wenig, deswegen nutze ich dem Fall lieber PHP und frage nach HTTP_USER_AGENT ab. Ist zwar auch nicht so besonderes, aber ein Vorteil gegenüber JS.

Gruß

544 Tage zuvor | #2 Sergej Müller

Das ist richtig, meistens wird jedoch dieser Wert gebraucht, um weiter im JavaScript damit zu arbeiten, um entsprechende Aktionen ausführen zu können. Fürs Markup sollte man den Browser serverseitig abfragen, im CSS mit Hacks arbeiten und direkt im Javascript (als externe Datei) ist man entweder auf die oben gelisteten oder auf eigene Lösungen angewiesen.

500 Tage zuvor | #3 Timo

Hihi :-)
Das ist doch was, was man mal wissen sollte, dass das auch geht. Ich kannte es bisher nur mit css, vorallem brauchte es wegen dem doofen IE -.-

Aber mal eine andere Sache. Wie beliebt ist eigentlich Javascript im Inet und auf Blogs? Ich hab noch in Erinnerung, dass eignetlich Javascript absolut gehasst wird… ich war am überlegen, ob ich eine Sache in meine Posts einbastel, welche die Navigation schöner macht, wäre aber JavaScript bei und da traue ich mich noch nicht so ganz…

LG
Timo

500 Tage zuvor | #4 Sergej Müller

@ Timo
Kommt sicherlich auf die Zielgruppe an. Solange deine Navigation auch ohne JavaScript nutzbar bleibt, spricht gegen eine “Verschönerung” via Script nichts dagegen.

500 Tage zuvor | #5 Timo

Das auf jeden Fall, ich wollte diese “Informationen” in Tabs packen… heißt:

Tab 1 -> Tags
Tab 2 -> Diese Sociable dinger da
Tab 3 -> Daten wie Uhrzeit, sonstige Informationen, RSS (als wiederholung)

Weil das alles dauerhaft untereinander find ich ziemlich doof, vorallem sieht es nicht so schön aus, da fand ich die Idee mit Tabs echt toll… bloß weiß nicht was google dazu sagt und ich weiß nicht was die benutzer dazu sagen *gg*

369 Tage zuvor | #6 Alex

Danke für die Tipps! Auch ihre Kommentare helfen mir. danke

253 Tage zuvor | #7 Robinson

Hey, würde mich interessieren ob es da mit Umlauten Probleme geben könnte. Also wenn es mal nicht gerade UTF-8 als Standardcode ist? Freu mich auf eine Antwort.

253 Tage zuvor | #8 Sergej Müller

Jemand muss es ausprobieren. Berichte über die Ergebnisse ;)

185 Tage zuvor | #9 Oleg

Prüfung auf FF3 funktioniert nicht mehr für Firefox 3.6. Weißt jemand eine Lösung? Danke!

185 Tage zuvor | #10 Sergej Müller

Ich vermute, wir müssen abwarten, bis jemand in der Szene einen kniffligen Weg gefunden hat. Bis dahin einfach den User-Agent prüfen.

91 Tage zuvor | #11 Uta F.

Danke für die Tipps!

80 Tage zuvor | #12 Beni

Wenn man jetzt mit einem Iphone oder einem ipid touch meine Homepage augruft kommt man immer auf die startseite, genau wie mit einem normalen computer oder browser. Zudem habe ich eine extra mobile seite. Welchen code kann ich verwenden, damit ich wenn ich jetzt mit dem iphone, usw.., meine seite aufruf direkt auf die mobile seite weitergeletitet werde ?

75 Tage zuvor | #13 Sergej Müller

@Beni
Die Erkennung und Weiterleitung des Browsers erledigst du idealerweise auf der Serverebene, beispielsweise mit .htaccess. Dafür gibt es genug Code-Beispiele oder Plugins für dein CMS. Einfach bei Google schauen.

Suche

Artikel vom 2. Februar 2009