CINXE.COM
EvoComp - JavaScript Beispiele: JavaScript Browser check / detection
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>EvoComp - JavaScript Beispiele: JavaScript Browser check / detection</title> <meta name="description" content="Mit dem JavaScript Browser check werden Angaben zur vom Anwender genutzten Browseranwendung ermittelt (JavaScript Browser detection)." /> <meta name="keywords" lang="de" content="javascript browser,javascript browser check,javascript browser detection,javascript browserinformationen,browser,browseranwendung,webbrowser" /> <meta name="language" content="de" /> <meta http-equiv="content-language" content="de" /> <meta name="robots" content="index,follow,noarchive" /> <meta name="date" content="2007-08-24"> <meta name="DC.Date" content="2007-08-24"> <base href="http://www.evocomp.de/beispiele/javascript/browser.html"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="author" content="Alexander Müller"> <meta name="DC.Creator" content="Alexander,Müller"> <meta name="DC.Publisher" content="Alexander,Müller"> <meta name="DC.Contributor" content="Alexander,Müller"> <meta name="DC.Type" content="Text"> <meta name="DC.Format" content="text/html"> <meta name="DC.Identifier" content="http://www.evocomp.de/"> <meta http-equiv="expires" content="0"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> <link rel="stylesheet" type="text/css" href="/portal.css"> <script src="/portal.js" type="text/javascript"></script> <meta name="revisit-after" content="15 days"> <meta http-equiv="pragma" content="no-cache"> <meta name="audience" content="Alle"> </head> <body> <a id="top" name="top"><img class="transparent" border="0" name="icount" src="/pic/transparent.gif" alt=""></a> <script language="javascript" type="text/javascript"> <!-- // hide from older browsers frameCheck (); document.getElementsByName ("icount") [0].src = "/pic/transparent.gif?" + Math.random (); // --> </script> <a href="/" title=""><img class="logo" border="0" src="/pic/logo_evocomp.jpg" alt=""></a> <p class="banner"> <a href="http://www.kunstundreisen.de" rel="nofollow" title="" target="_blank"><img border="0" src="http://www.kunstundreisen.de/mehr/verlinkung/grafiken/kunstundreisen_468_60.gif" width="468" height="60" alt=""></a> <img border="0" src="/pic/ad.gif" alt=""> </p> <div id="container"> <ul id="topmenu"> <li><a href="/index.html" title="Startseite">Home</a></li> <li><a href="/sitemap.html" title="Seitenstruktur">Sitemap</a></li> <li><a href="/contact.html" title="Kontakt">Kontakt</a></li> <li><a href="/imprint.html" title="Impressum">Impressum</a></li> </ul> <div id="contentcontainer"> <div id="breadcrumb">Sie sind hier: <a href="/index.html" title="Startseite">Home</a> :: <a href="/beispiele/beispiele.html" title="Beispiele Script">Beispiele</a> :: <a href="/beispiele/javascript/javascripts.html" title="JScript / JavaScripts / JavaScript Beispiele">JavaScript</a> :: <a href="/beispiele/javascript/browser.html" title="browser Java Script">Browser</a> </div> <div id="sample"> <ul> <li>Beispiele</li> <li>Methoden</li> <li><a href="/beispiele/javascript/alert.html" title="java script alert javascript">» alert</a></li> <li><a href="/beispiele/javascript/back.html" title="window back javascript">» back</a></li> <li><a href="/beispiele/javascript/clearinterval.html" title="clearinterval javascript">» clearInterval</a></li> <li><a href="/beispiele/javascript/cleartimeout.html" title="cleartimeout javascript">» clearTimeout</a></li> <li><a href="/beispiele/javascript/window-close.html" title="javascript window close javascript">» close</a></li> <li><a href="/beispiele/javascript/confirm.html" title="window confirm javascript">» confirm</a></li> <li><a href="/beispiele/javascript/getelementbyid.html" title="document getelementbyid javascript">» getElementById</a></li> <li><a href="/beispiele/javascript/indexof.html" title="indexof javascript">» indexOf</a></li> <li><a href="/beispiele/javascript/window-open.html" title="javascript window open javascript">» open</a></li> <li><a href="/beispiele/javascript/print.html" title="window print javascript">» print</a></li> <li><a href="/beispiele/javascript/prompt.html" title="window prompt javascript">» prompt</a></li> <li><a href="/beispiele/javascript/reload.html" title="java script reload javascript">» reload</a></li> <li><a href="/beispiele/javascript/location-replace.html" title="java script replace javascript">» replace (Location)</a></li> <li><a href="/beispiele/javascript/setinterval.html" title="window setinterval javascript">» setInterval</a></li> <li><a href="/beispiele/javascript/settimeout.html" title="window settimeout javascript">» setTimeout</a></li> <li><a href="/beispiele/javascript/split.html" title="split javascript">» split</a></li> <li><a href="/beispiele/javascript/substring.html" title="substring javascript">» substring</a></li> <li><a href="/beispiele/javascript/write.html" title="document write javascript">» write</a></li> <li>Eigenschaften</li> <li><a href="/beispiele/javascript/location-href.html" title="location href javascript">» href (Location)</a></li> <li><a href="/beispiele/javascript/document-url.html" title="url javascript">» url</a></li> <li>Objekte</li> <li><a href="/beispiele/javascript/array.html" title="java script array javascript">» Array</a></li> <li><a href="/beispiele/javascript/date.html" title="javascript datum,zeit / time,date javascript">» Date</a></li> <li><a href="/beispiele/javascript/document.html" title="java script document javascript">» Document</a></li> <li><a href="/beispiele/javascript/event.html" title="event javascript">» Event</a></li> <li><a href="/beispiele/javascript/history.html" title="java script history javascript">» History</a></li> <li><a href="/beispiele/javascript/location.html" title="java script location javascript">» Location</a></li> <li><a href="/beispiele/javascript/string.html" title="java script string javascript">» String</a></li> <li><a href="/beispiele/javascript/style.html" title="CSS Style javascript">» Style (CSS)</a></li> <li><a href="/beispiele/javascript/window.html" title="java script window javascript">» Window</a></li> <li>Ereignisse (Events)</li> <li><a href="/beispiele/javascript/event-onclick.html" title="onclick javascript">» onclick</a></li> <li><a href="/beispiele/javascript/event-onload.html" title="onload javascript">» onload</a></li> <li><a href="/beispiele/javascript/event-onchange.html" title="onchange javascript">» onchange</a></li> <li>Sprache</li> <li><a href="/beispiele/javascript/for.html" title="for javascript">» for</a></li> <li><a href="/beispiele/javascript/for-in.html" title="for in javascript">» for in</a></li> <li><a href="/beispiele/javascript/for-each.html" title="for each javascript">» for each</a></li> <li><a href="/beispiele/javascript/function.html" title="function javascript">» function</a></li> <li><a href="/beispiele/javascript/if.html" title="if javascript">» if</a></li> <li><a href="/beispiele/javascript/switch.html" title="switch javascript">» switch</a></li> <li><a href="/beispiele/javascript/while.html" title="while javascript">» while</a></li> <li><a href="/beispiele/javascript/do-while.html" title="do while javascript">» do ... while</a></li> <li><a href="/beispiele/javascript/variable.html" title="variable javascript">» Variable</a></li> <li><a href="/beispiele/javascript/try-catch.html" title="try javascript">» try (Exceptions)</a></li> <li>Ajax</li> <li><a href="/beispiele/javascript/ajax.html" title="ajax javascript">» Ajax</a></li> <li>Sonstiges</li> <li><a href="/beispiele/javascript/bilder.html" title="bilder javascript">» Bilder</a></li> <li><a href="/beispiele/javascript/browser.html" title="browser javascript">» Browser</a></li> <li><a href="/beispiele/javascript/checkbox.html" title="checkbox javascript">» Checkbox</a></li> <li><a href="/beispiele/javascript/cookies.html" title="cookies javascript">» Cookies</a></li> <li><a href="/beispiele/javascript/countdown.html" title="countdown javascript">» Countdown</a></li> <li><a href="/beispiele/javascript/cursor.html" title="cursor javascript">» Cursor</a></li> <li><a href="/beispiele/javascript/div.html" title="div javascript">» DIV</a></li> <li><a href="/beispiele/javascript/dom.html" title="dom javascript">» DOM</a></li> <li><a href="/beispiele/javascript/fenster.html" title="html fenster javascript">» Fenster</a></li> <li><a href="/beispiele/javascript/form.html" title="form javascript">» Form</a></li> <li><a href="/beispiele/javascript/html.html" title="html javascript">» HTML</a></li> <li><a href="/beispiele/javascript/popup.html" title="popup javascript">» PopUp</a></li> <li><a href="/beispiele/javascript/redirect.html" title="redirect javascript">» redirect</a></li> <li><a href="/beispiele/javascript/submit.html" title="submit javascript">» submit</a></li> <li><a href="/beispiele/javascript/textarea.html" title="textarea javascript">» Textarea</a></li> <li><a href="/beispiele/javascript/trim.html" title="string trim javascript">» trim String</a></li> <li><a href="/beispiele/javascript/void.html" title="void javascript">» void</a></li> <li><a href="/beispiele/javascript/xml.html" title="xml javascript">» XML</a></li> </ul> </div> <h1 class="notopmargin">JavaScript Browser check / detection</h1> <p class="norm"> In manchen Fällen ist es nützlich, wenn genauere Informationen bezüglich des vom Besucher einer Website genutzten <strong>Webbrowsers</strong> zur Verfügung stehen. Dies gilt insbesondere dann, wenn Inhalte per <strong>JavaScript</strong> dynamisch integriert oder angepasst werden müssen (per DHTML oder DOM). So kann bei der Erstellung von Internetseiten auf Besonderheiten einzelner Browser eingegangen werden und die entsprechenden Fähigkeiten des jeweiligen <strong>Browsers</strong> optimal genutzt werden. </p> <p class="norm"> Um herauszufinden, welchen <strong>Browser</strong> ein Anwender nutzt, kann man sich der im JavaScript-Objekt Navigator gespeicherten Informationen bedienen. Dieses Objekt besitzt die Eigenschaft <strong>userAgent</strong>, in der nähere Informationen zum verwendeten <strong>Webbrowser</strong> zu finden sind. Die Eigenschaft userAgent enthält eine <a href="/beispiele/javascript/string.html" title="zeichenkette java script">Zeichenkette</a>, die neben dem Namen und der Version der <strong>Browseranwendung</strong> auch Informationen zum verwendeten Betriebssystem enthält. </p> <p class="norm"> Der erste Code-Abschnitt auf dieser Seite zeigt, wie die benötigten Informationen aus der userAgent-Eigenschaft extrahiert werden können. Bitte beachten Sie, dass diese Möglichkeit der Ermittlung von <strong>Browserinformationen</strong> relativ unsicher ist, da verschiedene Browser oder Browsererweiterungen die in userAgent gespeicherte Zeichenkette gezielt manipulieren, um die <strong>Browseridentität</strong> zu verschleiern. Es ist daher stets sicherer den Browser über dessen enthaltene JavaScript-Objekte zu <strong>identifizieren</strong>. </p> <h2>JavaScript Browsererkennung mit der Klasse BrowserCheck</h2> <p class="norm"> Im unteren <strong>JavaScript-Script</strong> wird die Klasse <strong>BrowserCheck</strong> als Singleton implementiert. Die fertig initialisierte Instanz steht umgehend nach Laden der HTML- bzw.JavaScript-Datei (je nachdem, ob das Script in einer JS-Datei ausgelagert ist oder innerhalb des HTML-Dokuments) zur Verfügung. Mit den Get-Methoden kann die jeweilige Komponente ermittelt werden – darüber hinaus enthält die Klasse keine öffentlichen <a href="/beispiele/javascript/function.html" title="funktionen java script">Funktionen</a>. Das <strong>Script</strong> verarbeitet die im userAgent-String des Browsers gespeicherten Daten. </p> <p class="norm"> Dabei werden mit Hilfe der String-Methoden <a href="/beispiele/javascript/indexof.html" title="string.indexof java script">indexOf()</a>, search und match die <strong>Browserstrings</strong> auf bekannte Browser untersucht. Die beiden privaten Methoden getBrowserInfo und getOSInfo enthalten die zur <strong>Erkennung verschiedener Browser</strong> benötigten Daten. In Form von <a href="/beispiele/javascript/array.html" title="arrays java script">Arrays</a> von Objekten (Variable browserCheck bei Methode searchBrowserInfo bzw. osCheck im Falle von searchOSInfo) sind Zeichenketten und reguläre Ausdrücke gespeichert, nach denen gesucht wird und auf deren Format die Suche – zumindest für Browser, die dem Schema entsprechen – entscheidet, um welchen Browser es sich im jeweiligen Fall handelt. </p> <div class="code2"> <pre><script language="javascript" type="text/javascript"> <span class="code_comment"><!-- // JavaScript-Bereich für ältere Browser auskommentieren</span> <span class="code_comment">// Definition eines Objekts, welches Browserinformationen zur Verfügung stellt.</span> <span class="code_comment">// Die Implementierung erfolgt als Singleton - Initialisierung erfolgt automatisch</span> <span class="code_comment">// nach dem Laden des Quellcodes und das Objekt steht unter seinem Namen</span> <span class="code_comment">// (browserInformation) direkt zur Verfügung. Nach Aufruf einer Seite, die das</span> <span class="code_comment">// Script einbindet, stehen die Informationen über die entsprechenden get-Methoden</span> <span class="code_comment">// zur Verfügung.</span> <span class="code_keyword">var </span>browserInformation = <span class="code_keyword">new </span><span class="code_keyword">function</span> BrowserCheck () <span class="code_keyword">{</span> <span class="code_comment">// Definition einer privaten Methode searchBrowserInfo, die keine</span> <span class="code_comment">// Parameter erwartet.</span> <span class="code_comment">// Diese Methode ermittelt Informationen zur Browseranwendung aus der</span> <span class="code_comment">// Eigenschaft userAgent des Navigator-Objekts.</span> <span class="code_keyword">var </span>searchBrowserInfo = <span class="code_keyword">function</span> () <span class="code_keyword">{</span> <span class="code_comment">// Variablen zur Speicherung der emittelten Informationen</span> <span class="code_keyword">var </span>bname, ver; <span class="code_comment">// UserAgent-String aus dem Navigator-Objekt enthält Browserinformationen</span> <span class="code_keyword">var </span>bs = navigator.userAgent; <span class="code_comment">// Zeichenketten zur Identifikation der Browseranwendungen</span> <span class="code_comment">// Weitere Browser können erkannt werden, indem die untere Liste entsprechend</span> <span class="code_comment">// vervollständigt wird.</span> <span class="code_keyword">var </span>browserCheck = [ <span class="code_keyword">{</span> identification: <span class="code_string">'Firefox'</span>, name: <span class="code_string">'Firefox'</span>, version: <span class="code_string">'Firefox/\([0-9.]\+\)'</span> <span class="code_keyword">}</span>, <span class="code_keyword">{</span> identification: <span class="code_string">'Konqueror'</span>, name: <span class="code_string">'Konqueror'</span>, version: <span class="code_string">'Konqueror/\([0-9.]\+\)'</span> <span class="code_keyword">}</span>, <span class="code_keyword">{</span> identification: <span class="code_string">'MSIE'</span>, name: <span class="code_string">'Internet Explorer'</span>, version: <span class="code_string">'MSIE \([0-9.]\+\)'</span> <span class="code_keyword">}</span>, <span class="code_keyword">{</span> identification: <span class="code_string">'Camino'</span>, name: <span class="code_string">'Camino'</span>, version: <span class="code_string">'Camino/\([0-9.]\+\)'</span> <span class="code_keyword">}</span>, <span class="code_keyword">{</span> identification: <span class="code_string">'Opera'</span>, name: <span class="code_string">'Opera'</span>, version: <span class="code_string">'Opera/\([0-9.]\+\)'</span> <span class="code_keyword">}</span>, <span class="code_keyword">{</span> identification: <span class="code_string">'Netscape'</span>, name: <span class="code_string">'Netscape'</span>, version: <span class="code_string">'Netscape[0-9]\?/\([0-9.]\+\)'</span> <span class="code_keyword">}</span>, <span class="code_keyword">{</span> identification: <span class="code_string">'Safari'</span>, name: <span class="code_string">'Safari'</span>, version: <span class="code_string">'Safari/\([0-9.]\+\)'</span> <span class="code_keyword">}</span>, <span class="code_keyword">{</span> identification: <span class="code_string">'Gecko'</span>, name: <span class="code_string">'Mozilla'</span>, version: <span class="code_string">'rv:\([0-9.]+\)'</span> <span class="code_keyword">}</span> ]; <span class="code_keyword">var </span>i = 0; <span class="code_comment">// Zur Erkennung des Browsers nacheinander die obere Liste durchgehen bis</span> <span class="code_comment">// ein Browser erkannt wurde oder aber die Alternativen ausgehen.</span> <span class="code_keyword">while</span> (!bname && browserCheck[i]) <span class="code_keyword">{</span> <span class="code_comment">// Identifikationsstring im User-Agent enthalten?</span> <span class="code_keyword">if</span> (bs.indexOf (browserCheck[i].identification) != -1) <span class="code_keyword">{</span> <span class="code_comment">// Browser erkannt: Name des Browsers speichern...</span> bname = browserCheck[i].name; <span class="code_comment">// und Version des erkannten Browsers ermitteln.</span> <span class="code_keyword">if</span> (bs.match (RegExp (browserCheck[i].version)) != -1) <span class="code_comment">// Versionsstring im UserAgent-String gefunden.</span> ver = RegExp.$1; <span class="code_keyword">}</span> i++; <span class="code_keyword">}</span> <span class="code_comment">// Ermittelte Browserinformationen als Objekt mit den Eigenschaften</span> <span class="code_comment">// name und version zurückgeben. Was nicht erkannt wurde wird mit</span> <span class="code_comment">// der Zeichenkette unbekannt belegt.</span> <span class="code_keyword">return</span> <span class="code_keyword">{</span> name: bname ¦¦ <span class="code_string">'unbekannt'</span>, version: ver ¦¦ <span class="code_string">'unbekannt'</span> <span class="code_keyword">}</span>; <span class="code_keyword">}</span> <span class="code_comment">// Private Methode zur Ermittlung von Informationen zum genutzten Betriebssystem.</span> <span class="code_comment">// Ausgewertet werden Informationen, die im JavaScript-Objekt navigator unter</span> <span class="code_comment">// der Eigenschaft userAgent gespeichert sind.</span> <span class="code_keyword">var </span>searchOSInfo = <span class="code_keyword">function</span> () <span class="code_keyword">{</span> <span class="code_comment">// Variablen zur Speicherung der Inofrmationen zum Betriebssystem</span> <span class="code_keyword">var </span>os, ver; <span class="code_comment">// Verarbeitet werden die in der userAgent-Eigenschaft des navigator-Objekts</span> <span class="code_comment">// gespeicherten Informationen.</span> <span class="code_keyword">var </span>bs = navigator.userAgent; <span class="code_comment">// Zeichenketten zur Erkennung der verschiedenen Betriebssysteme</span> <span class="code_comment">// Eine entsprechende Erweiterung dieser Liste ermöglicht das Erkennen</span> <span class="code_comment">// weiterer Betriebssysteme und deren Versionen.</span> <span class="code_keyword">var </span>osCheck = [ <span class="code_keyword">{</span> identification: <span class="code_string">'Win'</span>, osname: <span class="code_string">'Windows'</span>, versions: [ <span class="code_keyword">{</span> identification: <span class="code_string">'Windows NT 5\.1'</span>, name: <span class="code_string">'Windows XP'</span> <span class="code_keyword">}</span>, <span class="code_keyword">{</span> identification: <span class="code_string">'Win(dows )?95'</span>, name: <span class="code_string">'Windows 95'</span> <span class="code_keyword">}</span>, <span class="code_keyword">{</span> identification: <span class="code_string">'Win(dows )?98'</span>, name: <span class="code_string">'Windows 98'</span> <span class="code_keyword">}</span>, <span class="code_keyword">{</span> identification: <span class="code_string">'Windows NT 4\.0'</span>, name: <span class="code_string">'Windows NT 4.0'</span> <span class="code_keyword">}</span>, <span class="code_keyword">{</span> identification: <span class="code_string">'Windows NT 5\.0'</span>, name: <span class="code_string">'Windows 2000'</span> <span class="code_keyword">}</span>, <span class="code_keyword">{</span> identification: <span class="code_string">'Windows NT 5\.2'</span>, name: <span class="code_string">'Windows Server 2003'</span> <span class="code_keyword">}</span>, <span class="code_keyword">{</span> identification: <span class="code_string">'Windows NT 6\.0'</span>, name: <span class="code_string">'Windows Vista'</span> <span class="code_keyword">}</span> ] <span class="code_keyword">}</span>, <span class="code_keyword">{</span> identification: <span class="code_string">'Mac'</span>, osname: <span class="code_string">'Mac OS'</span>, versions: [ <span class="code_keyword">{</span> identification: <span class="code_string">'Mac'</span>, version: <span class="code_string">'\((PPC\¦Intel) Mac OS X[^;]\*\)'</span><span class="code_keyword">}</span> ] <span class="code_keyword">}</span>, <span class="code_keyword">{</span> identification: <span class="code_string">'Linux'</span>, osname: <span class="code_string">'Linux'</span>, versions: [ <span class="code_keyword">{</span> identification: <span class="code_string">'Debian'</span>, version: <span class="code_string">'Debian-\([^) "]*\)'</span><span class="code_keyword">}</span>, <span class="code_keyword">{</span> identification: <span class="code_string">'Ubuntu'</span>, version: <span class="code_string">'Ubuntu[-\/]\([^) "]\*\)'</span><span class="code_keyword">}</span>, <span class="code_keyword">{</span> identification: <span class="code_string">'Fedora'</span>, version: <span class="code_string">'Fedora/\([^) "]\*\)'</span><span class="code_keyword">}</span> ] <span class="code_keyword">}</span> ]; <span class="code_keyword">var </span>i = 0; <span class="code_comment">// Liste der bekannten Betriebssysteme solange abarbeiten, bis das Betriebssystem</span> <span class="code_comment">// erkannt wurde oder die Erkennung mangels entsprechender Informationen bzgl.</span> <span class="code_comment">// des eingesetzten Betriebssystems fehlschlägt.</span> <span class="code_keyword">while</span> (!os && osCheck[i]) <span class="code_keyword">{</span> <span class="code_comment">// Entsprechung mit einem der oberen Systeme gefunden?</span> <span class="code_keyword">if</span> (bs.indexOf (osCheck[i].identification) != -1) <span class="code_keyword">{</span> <span class="code_comment">// Grundsätzlicher Typ des Betriebssystems erkannt und dessen Name speichern.</span> os = osCheck[i].osname; <span class="code_keyword">var </span>j = 0; <span class="code_comment">// Genauere Versionsangaben über das System ermitteln.</span> <span class="code_comment">// Hier wird nach Entsprechungen mit den Versionsangaben aus der</span> <span class="code_comment">// oberen Versionsliste des jeweiligen Betriebssystems gesucht.</span> <span class="code_keyword">while</span> (!ver && osCheck[i].versions[j]) <span class="code_keyword">{</span> <span class="code_comment">// Bestimmte Version identifizierbar?</span> <span class="code_keyword">if</span> (bs.search (RegExp (osCheck[i].versions[j].identification)) != -1) <span class="code_comment">// Wenn es zu einem System mehrere Varianten gibt (z.B.</span> <span class="code_comment">// unterschiedliche Distributionen bei Linux) wird nun</span> <span class="code_comment">// versucht genauere Informationen zum System zu ermitteln.</span> <span class="code_keyword">if</span> (osCheck[i].versions[j].version) <span class="code_keyword">{</span> <span class="code_comment">// Gefundene Systemvariante speichern...</span> ver = osCheck[i].versions[j].identification; <span class="code_comment">// und versuchen die Versionsnummer zu ermitteln.</span> <span class="code_keyword">if</span> (bs.search (RegExp (osCheck[i].versions[j].version)) != -1) <span class="code_comment">// Versionsstring erkannt: Speicherung dieser Angaben</span> ver += <span class="code_string">' '</span> + RegExp.$1; <span class="code_keyword">}</span> <span class="code_keyword">else</span> <span class="code_comment">// Ansonsten wird der Name der Betriebssystemversion festgehalten.</span> ver = osCheck[i].versions[j].name; j++; <span class="code_keyword">}</span> <span class="code_keyword">}</span> i++; <span class="code_keyword">}</span> <span class="code_comment">// Informationen zum Betriebssystem als Objekt mit den Eigenschaften</span> <span class="code_comment">// name und version zurückgeben. Wurden Komponenten nicht erkannt, so</span> <span class="code_comment">// liefert die entsprechende Eigenschaft das String unbekannt.</span> <span class="code_keyword">return</span> <span class="code_keyword">{</span> name: os ¦¦ <span class="code_string">'unbekannt'</span>, version: ver ¦¦ <span class="code_string">'unbekannt'</span> <span class="code_keyword">}</span>; <span class="code_keyword">}</span> <span class="code_comment">// Private Variablen des Objekts</span> <span class="code_comment">// Variable zur Speicherung der Browserinformationen.</span> <span class="code_comment">// Initialisiert das Objekt mit den ermittelten Browserdaten</span> <span class="code_keyword">var </span>browser = searchBrowserInfo (); <span class="code_comment">// Variable zur Speicherung der Informationen zum Betriebssystem.</span> <span class="code_comment">// Initialisiert das Objekt mit Informationen zum genutzten Betriebssystem</span> <span class="code_keyword">var </span>os = searchOSInfo (); <span class="code_comment">// Öffentliche Methoden des Objekts</span> <span class="code_comment">// Liefert den Namen des benutzten Browsers</span> <span class="code_keyword">this</span>.getBrowserName = <span class="code_keyword">function</span> () <span class="code_keyword">{</span> <span class="code_keyword">return</span> browser.name; <span class="code_keyword">}</span> <span class="code_comment">// Liefert die Version der Browseranwendung</span> <span class="code_keyword">this</span>.getBrowserVersion = <span class="code_keyword">function</span> () <span class="code_keyword">{</span> <span class="code_keyword">return</span> browser.version; <span class="code_keyword">}</span> <span class="code_comment">// Liefert den Namen des Betriebssystems</span> <span class="code_keyword">this</span>.getOperatingSystem = <span class="code_keyword">function</span> () <span class="code_keyword">{</span> <span class="code_keyword">return</span> os.name; <span class="code_keyword">}</span> <span class="code_comment">// Liefert die Version des Betriebssystems</span> <span class="code_keyword">this</span>.getOSVersion = <span class="code_keyword">function</span> () <span class="code_keyword">{</span> <span class="code_keyword">return</span> os.version; <span class="code_keyword">}</span> <span class="code_keyword">}</span>; <span class="code_comment">// --></span> </script></pre> </div> <script language="javascript" type="text/javascript"> <!-- // JavaScript-Bereich f黵 鋖tere Browser auskommentieren // Definition eines Objekts, welches Browserinformationen zur Verf黦ung stellt. // Die Implementierung erfolgt als Singleton - Initialisierung erfolgt automatisch // nach dem Laden des Quellcodes und das Objekt steht unter seinem Namen // (browserInformation) direkt zur Verf黦ung. Nach Aufruf einer Seite, die das // Script einbindet, stehen die Informationen 黚er die entsprechenden get-Methoden // zur Verf黦ung. var browserInformation = new function BrowserCheck () { // Definition einer privaten Methode searchBrowserInfo, die keine // Parameter erwartet. // Diese Methode ermittelt Informationen zur Browseranwendung aus der // Eigenschaft userAgent des Navigator-Objekts. var searchBrowserInfo = function () { // Variablen zur Speicherung der emittelten Informationen var bname, ver; // UserAgent-String aus dem Navigator-Objekt enth鋖t Browserinformationen var bs = navigator.userAgent; // Zeichenketten zur Identifikation der Browseranwendungen // Weitere Browser k鰊nen erkannt werden, indem die untere Liste entsprechend // vervollst鋘digt wird. var browserCheck = [ { identification: 'Firefox', name: 'Firefox', version: 'Firefox/\([0-9.]\+\)' }, { identification: 'Konqueror', name: 'Konqueror', version: 'Konqueror/\([0-9.]\+\)' }, { identification: 'MSIE', name: 'Internet Explorer', version: 'MSIE \([0-9.]\+\)' }, { identification: 'Camino', name: 'Camino', version: 'Camino/\([0-9.]\+\)' }, { identification: 'Opera', name: 'Opera', version: 'Opera/\([0-9.]\+\)' }, { identification: 'Netscape', name: 'Netscape', version: 'Netscape[0-9]\?/\([0-9.]\+\)' }, { identification: 'Safari', name: 'Safari', version: 'Safari/\([0-9.]\+\)' }, { identification: 'Gecko', name: 'Mozilla', version: 'rv:\([0-9.]+\)' } ]; var i = 0; // Zur Erkennung des Browsers nacheinander die obere Liste durchgehen bis // ein Browser erkannt wurde oder aber die Alternativen ausgehen. while (!bname && browserCheck[i]) { // Identifikationsstring im User-Agent enthalten? if (bs.indexOf (browserCheck[i].identification) != -1) { // Browser erkannt: Name des Browsers speichern... bname = browserCheck[i].name; // und Version des erkannten Browsers ermitteln. if (bs.match (RegExp (browserCheck[i].version)) != -1) // Versionsstring im UserAgent-String gefunden. ver = RegExp.$1; } i++; } // Ermittelte Browserinformationen als Objekt mit den Eigenschaften // name und version zur點kgeben. Was nicht erkannt wurde wird mit // der Zeichenkette unbekannt belegt. return { name: bname || 'unbekannt', version: ver || 'unbekannt' }; } // Private Methode zur Ermittlung von Informationen zum genutzten Betriebssystem. // Ausgewertet werden Informationen, die im JavaScript-Objekt navigator unter // der Eigenschaft userAgent gespeichert sind. var searchOSInfo = function () { // Variablen zur Speicherung der Inofrmationen zum Betriebssystem var os, ver; // Verarbeitet werden die in der userAgent-Eigenschaft des navigator-Objekts // gespeicherten Informationen. var bs = navigator.userAgent; // Zeichenketten zur Erkennung der verschiedenen Betriebssysteme // Eine entsprechende Erweiterung dieser Liste erm鰃licht das Erkennen // weiterer Betriebssysteme und deren Versionen. var osCheck = [ { identification: 'Win', osname: 'Windows', versions: [ { identification: 'Windows NT 5\.1', name: 'Windows XP' }, { identification: 'Win(dows )?95', name: 'Windows 95' }, { identification: 'Win(dows )?98', name: 'Windows 98' }, { identification: 'Windows NT 4\.0', name: 'Windows NT 4.0' }, { identification: 'Windows NT 5\.0', name: 'Windows 2000' }, { identification: 'Windows NT 5\.2', name: 'Windows Server 2003' }, { identification: 'Windows NT 6\.0', name: 'Windows Vista' } ] }, { identification: 'Mac', osname: 'Mac OS', versions: [ { identification: 'Mac', version: '\((PPC\|Intel) Mac OS X[^;]\*\)'} ] }, { identification: 'Linux', osname: 'Linux', versions: [ { identification: 'Debian', version: 'Debian-\([^) "]*\)'}, { identification: 'Ubuntu', version: 'Ubuntu[-\/]\([^) "]\*\)'}, { identification: 'Fedora', version: 'Fedora/\([^) "]\*\)'} ] } ]; var i = 0; // Liste der bekannten Betriebssysteme solange abarbeiten, bis das Betriebssystem // erkannt wurde oder die Erkennung mangels entsprechender Informationen bzgl. // des eingesetzten Betriebssystems fehlschl鋑t. while (!os && osCheck[i]) { // Entsprechung mit einem der oberen Systeme gefunden? if (bs.indexOf (osCheck[i].identification) != -1) { // Grunds鋞zlicher Typ des Betriebssystems erkannt und dessen Name speichern. os = osCheck[i].osname; var j = 0; // Genauere Versionsangaben 黚er das System ermitteln. // Hier wird nach Entsprechungen mit den Versionsangaben aus der // oberen Versionsliste des jeweiligen Betriebssystems gesucht. while (!ver && osCheck[i].versions[j]) { // Bestimmte Version identifizierbar? if (bs.search (RegExp (osCheck[i].versions[j].identification)) != -1) // Wenn es zu einem System mehrere Varianten gibt (z.B. // unterschiedliche Distributionen bei Linux) wird nun // versucht genauere Informationen zum System zu ermitteln. if (osCheck[i].versions[j].version) { // Gefundene Systemvariante speichern... ver = osCheck[i].versions[j].identification; // und versuchen die Versionsnummer zu ermitteln. if (bs.search (RegExp (osCheck[i].versions[j].version)) != -1) // Versionsstring erkannt: Speicherung dieser Angaben ver += ' ' + RegExp.$1; } else // Ansonsten wird der Name der Betriebssystemversion festgehalten. ver = osCheck[i].versions[j].name; j++; } } i++; } // Informationen zum Betriebssystem als Objekt mit den Eigenschaften // name und version zur點kgeben. Wurden Komponenten nicht erkannt, so // liefert die entsprechende Eigenschaft das String unbekannt. return { name: os || 'unbekannt', version: ver || 'unbekannt' }; } // Private Variablen des Objekts // Variable zur Speicherung der Browserinformationen. // Initialisiert das Objekt mit den ermittelten Browserdaten var browser = searchBrowserInfo (); // Variable zur Speicherung der Informationen zum Betriebssystem. // Initialisiert das Objekt mit Informationen zum genutzten Betriebssystem var os = searchOSInfo (); // 謋fentliche Methoden des Objekts // Liefert den Namen des benutzten Browsers this.getBrowserName = function () { return browser.name; } // Liefert die Version der Browseranwendung this.getBrowserVersion = function () { return browser.version; } // Liefert den Namen des Betriebssystems this.getOperatingSystem = function () { return os.name; } // Liefert die Version des Betriebssystems this.getOSVersion = function () { return os.version; } }; // --> </script> <h2>JavaScript Browser Detection Beispiel</h2> <p class="norm"> Der Code-Block unten zeigt, wie die zuvor implementierte Klasse genutzt werden kann um die benötigten Informationen zusammenzutragen. Dabei ist es nicht nötig eine Instanz der Klasse zu erstellen, da sie bereits in initialisiertem Zustand unter dem Namen <strong>browserInformation</strong> bereit steht. Die ermittelten Werte werden über die Methode <a href="/beispiele/javascript/write.html" title="document.write java script">write()</a> – einer Methode zur Ausgabe von Zeichenketten, die Bestandteil des vordefinierten JavaScript-Objekts <a href="/beispiele/javascript/document.html" title="document java script">Document</a> ist – im aktuellen HTML-Dokument ausgegeben. </p> <div class="code2"> <pre><script language="javascript" type="text/javascript"> <span class="code_comment"><!-- // JavaScript-Bereich für ältere Browser auskommentieren</span> <span class="code_comment">// Ausgabe der Informationen im aktuellen HTML-Dokument</span> document.write (<span class="code_string">'Browser: '</span> + browserInformation.getBrowserName () + <span class="code_string">'<br>'</span> + <span class="code_string">'Version: '</span> + browserInformation.getBrowserVersion () + <span class="code_string">'<br>'</span> + <span class="code_string">'Betriebssystem: '</span> + browserInformation.getOperatingSystem () + <span class="code_string">'<br>'</span> + <span class="code_string">'Version: '</span> + browserInformation.getOSVersion ()); <span class="code_comment">// --></span> </script> </pre> </div> <p class="sample2"> <script language="javascript" type="text/javascript"> <!-- // JavaScript-Bereich f黵 鋖tere Browser auskommentieren // Ausgabe der Informationen im aktuellen HTML-Dokument document.write ('Browser: ' + browserInformation.getBrowserName () + '<br>' + 'Version: ' + browserInformation.getBrowserVersion () + '<br>' + 'Betriebssystem: ' + browserInformation.getOperatingSystem () + '<br>' + 'Version: ' + browserInformation.getOSVersion ()); // --> </script> </p> </div> <div id="left"> <div class="containerblock"> <p class="title">¬ Menu</p> <ul class="content"> <li><a href="/themen/evolutionsalgorithmen/evoalg.html" title="Evolutionäre Algorithmen">» Evolutionsalgorithmen</a></li> <li><a href="/softwareentwicklung/software-entwicklung.html" title="Software-Entwicklung">» Softwareentwicklung</a></li> <li><a href="/tutorials/tutorial.html" title="Tutorials / Tutorien">» Tutorials</a></li> <li><a href="/scripts/skripte.html" title="Free Scripts / Gratis Skripte Download">» Scriptarchiv</a></li> <li><a href="/beispiele/beispiele.html" title="Beispiele Scripts">» Beispiele</a></li> <li><a href="/beispiele/javascript/javascripts.html" title="JavaScripts / JavaScript Beispiel"> » JavaScript</a></li> <li><a href="/beispiele/php/php.html" title="PHP Script"> » PHP</a></li> <li><a href="http://forum.evocomp.de/" target="_blank" title="Forum Webentwicklung / Webprogrammierung">» Forum</a></li> <li><a href="/historie/historie.html" title="Historie">» Historie</a></li> <li><a href="/glossar/glossar.html" title="Glossar">» Glossar</a></li> <li><a href="/links/links.html" title="Links">» Links</a></li> <li><a href="/literatur/literatur.html" title="Literatur">» Literatur</a></li> <li><a href="/visitenkarte/index.html" title="Visitenkarte" target="_blank">» Visitenkarte</a></li> </ul> </div> <div class="containerblock"> <p class="title">¬ Gratis Download</p> <ul class="content"> <li><a href="/scripts/java-script-download/java-script-galerie/javascript-galerie.html" title="html bildergalerie">Web Galerie</a></li> <li><a href="/scripts/php-scripts-download/php-bilder-galerie/php-photo-galerie.html" title="dynamische bildergalerie">PHP Bildergalerie</a></li> <li><a href="/scripts/php-scripts-download/php-counter-class/php-counter-script.html" title="homepage counter">Besucherzähler</a></li> <li><a href="/scripts/java-script-download/java-script-fontsize/javascript-fontsize.html" title="schriftgröße html">Schriftgröße</a></li> </ul> </div> <div class="containerblock"> <p class="title">¬ Seminare</p> <ul class="content"> <li><a href="/beispiele/javascript/seminar-schulung-kurs-lernen.html" title="JavaScript lernen">JavaScript Kurs</a></li> <li><a href="/beispiele/php/lernen-kurs-schulung-seminar.html" title="PHP lernen">PHP Kurs</a></li> </ul> </div> <br/><br/> <div class="containerblock"> <p class="title">¬ Yoga</p> <ul class="content"> <li><a href="/yoga/deutschland/yoga-koeln.html" title="Yoga in Köln">Yoga Köln</a></li> <li><a href="/yoga/hatha-yoga.html" title="Hatha Yoga Köln">Hatha Yoga</a></li> <li><a href="/yoga/buecher/yoga-buch.html" title="Yoga Buch">Yoga Bücher</a></li> </ul> </div> <div class="containerblock"> <p class="title">¬ Insolvenzrecht</p> <ul class="content"> <li><a href="/insolvenz/insolvenzrecht-buch.html" title="Insolvenzrecht Buch">Literatur Insolvenzrecht</a></li> </ul> </div> </div> <div id="right"> <div class="containerblock"> <p class="title">¬ News</p> <p class="content"> <span class="latest_news_date">15.08.2008</span><span class="latest_news">Schleifen in PHP: Die While-Schleife <a href="/news/15_08_2008.html" title="Meldung vom 15.08.2008">» mehr</a></span> <span class="latest_news_date">13.08.2008</span><span class="latest_news">Nutzung von Variablen unter PHP: Definition, Sichtbarkeit und vordefinierte Variablen <a href="/news/13_08_2008.html" title="Meldung vom 13.08.2008">» mehr</a></span> <span class="latest_news_date">11.08.2008</span><span class="latest_news">Ausgabe von Datum und Zeit mit PHP nach Konvertierung in ein String <a href="/news/11_08_2008.html" title="Meldung vom 11.08.2008">» mehr</a></span> <span class="news_liste_hinweis">Eine vollständige News-Liste ist auf der <a href="/news/news.html" title="News Seite">News-Seite</a> zugänglich.</span> </p> </div> <div class="containerblock"> <p class="title">¬ Foren</p> <ul class="content"> <li> <div style="display:inline;float:right;width:130px;"> <a href="http://forum.evocomp.de/f7/" target="_blank" title="JavaScript Hilfe">JavaScript Forum</a><br> <a href="http://forum.evocomp.de/f8/" target="_blank" title="PHP Hilfe">PHP Forum</a><br> </div> <img width="48" height="48" src="/pic/forum_icon.gif" alt="Foren" /> </li> </ul> </div> <div class="containerblock"> <p class="title">¬ Buchtipp</p> <p class="content"> <span class="book"><a href="http://ad.zanox.com/ppc/?5685652C554664482T&ULP=[[22508213]]" rel="nofollow" title="" target="_blank"><img border="0" src="http://bilder.buecher.de/produkte/22/22508/22508213k.jpg" alt="" /><br />JavaScript kurz & gut</a><br /></span> <span class="book"><hr /> Weitere JavaScript Literaturtipps finden Sie unter <a href="/beispiele/javascript/buecher.html" title="">JavaScript Bücher</a> </span> </p> </div> </div> </div> <div id="copyright"> <script language="javascript" type="text/javascript"> <!-- // hide from older browsers var emadr = mkEmAdr (1); document.write ("© 2004-2025 <a href=\"" + emadr + "\" title=\"E-Mail an Alexander Müller\">" + "Alexander Müller<\/a>"); // --> </script> <noscript> © 2004-2025 Alexander Müller<br> <a href="http://call-center.evocomp.de" title="">Call Center Central</a> </noscript> <br><a href="http://www.EvoComp.de" title="Homepage von www.EvoComp.de">www.EvoComp.de</a><br> Letzte Änderung: 24.08.2007 <p> <img border="0" src="/pic/valid-html4.01.png" width="80" height="15" alt="Valid HTML 4.01!" title="Valid HTML 4.01!"> <img border="0" src="/pic/valid-css.png" width="80" height="15" alt="Valid CSS!" title="Valid CSS!"> <br><br> <a href="http://www.gadgets4web.net/service/web-design.html" title="erstellen Internetseite, Köln">Webdesign</a> • <a href="http://www.gadgets4web.net/service/beratung.html" title="Internetseiten, Köln">Beratung Internetseite</a> • <a href="http://www.gadgets4web.net/service/web-entwicklung.html" title="Internetseite programmieren, Köln">Programmierung Internetseite</a> </p> </div> </body> </html>