Multimediakurs Leinfelder: Inhalt/Modul 7 "JavaScript in Handarbeit"/Modul 7.4 "JavaScript-Level 3/7.4.5 weitere JavaScript-Beispiele mit Erläuterung Level 3, Teil Arbeiten mit Bildern

(© copyright)     Letzte Änderungen:13.04.2002


Modul 7.4.5: JavaScript "Level 3": komplexere JavaScript-Beispiele mit Erläuterung. Teil: Browserweichen und sonstige Weichen

Arbeiten mit Bildern | Arbeiten mit Formularen | Passwortschutz |
selbstgemachte Utilities | Browserweichen


Browserweichen

Das Web ist voller Skripte für Browserweichen, Browsersniffer etc.

Wir beschränken uns deshalb hier auf wenige Beispiele. Einen umfassenden Clientsniffer finden Sie u.a. bei Netscape.

Prinzipiell sind Browserweichen immer nach dem gleichen Prinzip aufgebaut. Sie bestehen aus if-Abfragen der Navigator-Eigenschaften userAgent sowie appName. Im Application Name steckt in der Regel die Versions-Nummer. Alle weiteren Eigenschaften, die abfragbar sind, finden Sie in Beispiel 3 auf dieser Seite. Sehr wichtig ist dabei auch die Stringmethode indexOf(), die nach einem eingegebenen Textstring sucht. Wird diese Übereinstimmung gefunden, ist der Ausgabewert >1. Oft finden Sie auch die Angabe >=0, stattdessen (größergleich 0). Werden verschiedene Versionen innerhalb eines Browsertyps abgefragt, werden z.T. Substring-Auslese-Methoden sowie das Umwandeln von Dezimalzahlen (z.B. 4.7) in darunterliegende Ganzzahlen (z.B. 4) via parseInt()-Methode verwendet.


Beispiel 1 Einfaches Beispiel- Sonderseite für den Internet Explorer 5.x

(Korrigierte Version, Stand 13.4.2002)

Das Skript sollte für Level-3-Kenner ziemlich selbsterklärend sein. Wir haben eine einfache if Abfrage, bei der zwei Bedingungen erfüllt sein müssen, damit eine keine Seitenumleitung erfolgt. Der Browser darf im userAgent-Wert nicht das Wort Explorer stehen haben. Es hilft allerdings nicht, den Application Namen Mozilla/5 auszuschließen, weil IE 5 (und auch IE 6) den ApplicationName Mozilla/4 haben. Mozilla bedeutet übrigens, dass der Browser Netscape-kompatibel sein soll (hmm..). Wir suchen deshalb IE 5 durch den appVersion-Namen MSIE 5 heraus.

<script language="JavaScript"><!--
var version = navigator.appVersion;
var browsername = navigator.appName;

if ((browsername.indexOf("Explorer") >-1) && version.indexOf ("MSIE 5") > -1)
{window.document.location.href="ie5ok.html";
}
//--></script>

Das Skript wird beim Laden sofort (an erster Stelle) ausgeführt, da es nicht als Funktion gestaltet ist. Die Umleitung erfolgt nur, wenn IE 5.x verwendet wird.


Beispiel 2: Sonderseite für alle Versionen ab IE 5.x und NN 6.x

(Korrigierte Version, Stand 13.4.2002)

Alle Browser bis zur Versionsnummer 4 sollen auf der ladenden Seiten verweilen, alle ab Version 5.x sollen weitergeleitet werden.

Das Skript hat sich nicht allzusehr verändert. Es sind zwei Variablen hinzugekommen, zum einen eine Variable vers, die das Suchergebnis innerhalb der Variable browser (also des navigator.userAgents) nach "Mozilla/" angibt, zum anderen die var aendern, die nur speichert, ob etwas gefunden wurde oder nicht. IE 5 wird gefunden falls sowohl der String Explorer als auch der String MSIE 5 in den entsprechenden Variablen gefunden wird. Falls dies gefunden wird ist der Wert IndexOf von beiden Variablen >-1. Der Nescape Navigator ist etwas schwerer auszulesen.. Drei Bedingungen müssen erfüllt sein. Der String Netscape muss in der Variablen Browsername gefunden werden, die Variable browser muss die Variable Mozilla/ enthalten und im Navigator die Versionsnummer ausgeschnitten (mit substring, zwischen Zeichenposition 9 und 11) und mit parseInt auf eine ganze Zahl abgerundet, sie muss größer oder gleich 6 sein. Für IE 6 wird ähnlich vorgegangen. Da dies aber anscheinend nicht immer funktioniert, suchen wir NN 6 auch via Verknüpfung von Netscape und Mozilla/5 sowie IE 6 via Verknüpfung von Explorer und MSIE 6.

(Skript ist etwas angelehnt an entsprechende von GoLive automatisch zur Verfügung gestellten Browserweichen. Allerdings verfügen die GoLive-Weichen nicht, um IE 5 und höher auszulesen, da GoLive fälschlicherweise davon ausgeht, dass IE 5 den Codenamen Mozilla/5 haben sollte. Tatsächlich haben IE 5 und 6 genauso wie IE 4 den Codenamen Mozilla/4).

<script language="JavaScript"><!--

var browser = navigator.userAgent;
var version=navigator.appVersion;
var browsername = navigator.appName;
var vers = browser.indexOf("Mozilla/");
var aendern = "nein";
if ((browsername.indexOf("Explorer") >-1) && (browser.indexOf("Mozilla/5") >-1))
aendern = "ok";
if ((browsername.indexOf("Netscape") >-1) && (browser.indexOf("Mozilla/5") >-1))
aendern = "ok";
if ((browsername.indexOf("Explorer") >-1) && (version.indexOf("MSIE 5") >-1))
aendern = "ok";
if ((browsername.indexOf("Explorer") >-1) && (version.indexOf("MSIE 6") >-1))
aendern = "ok";
if ((browsername.indexOf("Netscape") >-1) && (vers >-1) &&
(parseInt(browser.substring(vers+8, vers+10)) >= 6))
aendern = "ok";
if ((browsername.indexOf("Explorer") >= 0) && (vers >-1) &&
(parseInt(browser.substring(vers+8, vers+10)) >= 6))
aendern = "ok";
if (aendern=="ok")
{
window.document.location.href = 'ie5nn6ok.html'; }
//--></script>


Beispiel 3: Alle navigator-Objekteigenschaften zum Nachsehen und Selbsttesten

In diesem Skriptbeispiel werden alle verfügbaren Eigenschaften des Navigatorobjekts für Ihren Browser ausgelesen. Zusätzlich finden Sie Screenshots für diese Eigenschaftenwerte für NN6, NN4 und IE 5. Damit können Sie nun Ihrer Browserweichen-Begabung freien Lauf lassen.


Beispiel 4: Auslesen von Netscape-Browsern gegen den Rest der Welt.

Dies kann manchmal notwendig sein. Manche JavaApplets sind z.B. nicht gemäß dem Java-Standard geschrieben. Sie laufen dann unter Internet Explorer und ggf. Opera, aber nicht unter Netscape. Dieses Skript wird auch im Kursmodul 8.6 (JavaApplets) verwendet. Hier ein Beispiel (generiert von GoLive 5.0, leicht verändert):

<script language ="JavaScript"><!--
var skipPage = true;
var
bAgent = window.navigator.userAgent;
var bAppName = window.navigator.appName;
var
bMozIdx = bAgent.indexOf("Mozilla/");
if ((bAppName.indexOf("Netscape") >= 0) && (bAgent.indexOf("Mozilla/2") >= 0)) skipPage = false;
if ((bAppName.indexOf("Netscape") >= 0) && (bAgent.indexOf("Mozilla/3") >= 0)) skipPage = false;
if ((bAppName.indexOf("Netscape") >= 0) && (bAgent.indexOf("Mozilla/4") >= 0)) skipPage = false;
if ((bAppName.indexOf("Netscape") >= 0) && (bAgent.indexOf("Mozilla/5") >= 0)) skipPage = false;
if ((bAppName.indexOf("Netscape") >= 0) && (bMozIdx >= 0) &&
(parseInt(bAgent.substring(bMozIdx+8, bMozIdx+10)) >= 6)) skipPage = false;
if (skipPage) { location = '8_6_chomptext.html'; }

//--></script>

Die Variable skipPage wird auf true gesetzt. bAgent und bAppName sind Variablen die schlichtweg die userAgent und appName-Eigenschaften abkürzen, damit man sie leichter in den Skripten verwenden kann. bMozIdx sich mit der indexOf-Stringmethode nach dem Wort Mozilla/, ist also auch quasi eine Abkürzung. Wenn Netscape in Version 2-6 vorhanden ist, wird skipPage auf false gesetzt und es passiert gar nichts. Netscape 6 muss mit einer etwas anderen Methode herausgelesen werden. Dies kennen Sie schon aus Beispiel 2. Wenn dies alles nicht zutrifft, bleibt skip page wie es war (nämlich auf true) und es wird über die location-Eigenschaft auf eine andere Seite (hier 8_6_chomptext.html) umgeleitet.


Beispiel 5: Opera 5 versus Netscape ab 4 und Internetexplorer ab 5

Anwendungsmöglichkeit: Opera 5 und früher kann mit dynamic html nichts anfangen. Netscape ab Version 4 und Internet Explorer ab Version 5 können dies jedoch umsetzen. Eine entsprechende Weiche sieht so aus:

<script language="JavaScript"><!--
var skipPage = true; bAgent = navigator.userAgent; bAppName = navigator.appName; bMozIdx = bAgent.indexOf("Mozilla/");
var version=navigator.appVersion;
if ((bAppName.indexOf("Netscape") >= 0) && (bAgent.indexOf("Mozilla/4") >= 0)) skipPage = false;
if ((bAppName.indexOf("Netscape") >= 0) && (bAgent.indexOf("Mozilla/5") >= 0)) skipPage = false;
if ((bAppName.indexOf("Explorer") >= 0) && (version.indexOf("MSIE 5") >= 0)) skipPage = false;
if ((bAppName.indexOf("Explorer") >= 0) && (version.indexOf("MSIE 6") >= 0)) skipPage = false;
if ((bAppName.indexOf("Explorer") >= 0) && (bAgent.indexOf("Mozilla/5") >= 0)) skipPage = false;
if ((bAppName.indexOf("Netscape") >= 0) && (bMozIdx >= 0) &&
(parseInt(bAgent.substring(bMozIdx+8, bMozIdx+10)) >= 6)) skipPage = false;
if ((bAppName.indexOf("Explorer") >= 0) && (bMozIdx >= 0) &&
(parseInt(bAgent.substring(bMozIdx+8, bMozIdx+10)) >= 6)) skipPage = false;
if (bAgent.indexOf("Opera") >= 0) skipPage = true;
if (skipPage) { location = 'getbrowser.html'; }
</script>

Das Skript basiert wieder auf obigem Beispiel. Ist Netscape 4, 5 oder 6 bzw, Internet Explorer 5 oder 6 vorhanden, bleibt man auf der Seite (Netscape 6 und IE 6 werden wie oben etwas umständlich ausgelesen). Wenn aber das Wort Opera im UserAgent auftaucht, wird skip auf true gesetzt und auf eine alternative Seite umgeleitet. Opera kann sich frecherweise als Explorer, Mozilla oder Opera verkaufen, je nachdem, was der Nutzer voreingestellt hat, userAgent hat jedoch immer den Wert Opera. Ein kleines Problem gibt es auch bei der Erkennung von Internet Explorer 5 und 6. Dieser verkauft sich ebenfalls als Mozilla/4. Wenn man aber alle Mozilla/4 für IE zulässt, sind auch die Viererversionen von IE dabei, was wir ja verhindern wollen. Da hilft nur das Auslesen der Angabe MSIE 5 bzw. MSIE 6 in der Application Version für IE.

Dieses Skript wird in der Browsertechnologie-Testseite verwendet, die in Kursanlage 10 erläutert wird


alle obigen Skriptbeispiele sowie frühere sind im Anhang zu Modul 7 aufgelistet.


>> Modul 7.5: JavaScript-Level 4

<< Modul 7.4.5: Level 3-Beispiele (Utilities)
<< Modul 7.4.5: Level 3-Beispiele: Beginn
<< Modul 7.4.4: Level 3-Zusammenfassung
<< Modul 7.4: Level 3-Modul: Beginn