Browserweichen mit JavaScript

Transkript

1 Browserseitiges Skripting: JavaScript Seite 1 von 12 JA WEI mit JavaScript Der Sinn und Zweck von Seite 1 Browser am Objektmodell erkennen Seite 3 Browsername, -version und Betriebssystem ermitteln Seite 5 Die Browserweiche anwenden Seite 12 Übersicht Eigentlich ist JavaScript eine standardisierte Skriptsprache, so wie HTML eine standardisierte Beschreibungssprache ist. Das bedeutet, dass es eigentlich möglich sein sollte, selbst komplexe interaktive, respektive dynamische Seiten für das Web zu entwickeln, die ohne Unterschiede auf allen Browsern funktionieren und gleich aussehen. Leider weicht das richtige Leben jedoch wie in den meisten Fällen so auch hier von der schönen Theorie ab: Es existieren eine ganze Reihe von Browser-Inkompatibilitäten, die vor allem dann zum Tragen kommen, wenn es darum geht, die Fähigkeiten der Browser auszureizen, um Seiten zu schaffen, die sich von dem abheben, was man im Netz alltäglich zu sehen bekommt. Das hat nicht unbedingt etwas mit JavaScript zu tun. Auch beim Einsatz von CSS kann es Ihnen passieren, dass ein Browser die Seite überhaupt nicht mehr brauchbar darstellen kann. Es gibt zahlreiche Web-Entwickler die der Meinung sind, seien unnötig, wenn eine Webseite ordentlich erstellt und geplant wird. Dem kann man sich durchaus anschließen. Leider spielen in der Praxis aber auch die Auftraggeber einer Webseite eine Rolle. Sie haben das Geld und damit das Sagen. Bestehen sie auf sehr browserspezifische Techniken, kommt man kaum umhin sie einzusetzen. Dann ist eine Browserweiche immer noch besser, als dass die Seite für viele Besucher nicht mehr darstellbar ist. Browser mit unterschiedlichen Fähigkeiten einsetzen oder doch nicht? Der Sinn und Zweck von Bevor Sie versuchen ein Problem mithilfe einer Browserweiche zu lösen, stellt sich natürlich die Frage, für welche Probleme sie überhaupt eine Lösung darstellt. Generell sollten Sie sich dabei an folgenden Leitsätzen orientieren: 1. Eine clientseitige Browserweiche kann nur richtig funktionieren, wenn der Browser JavaScript ausführt. 2. Sie können nur Informationen auswerten, die der Browser zur Verfügung stellt. Gibt dieser keine Auskunft über sich und seine Fähigkeiten oder gibt falsche Informationen an, macht eine Browserweiche oft mehr Probleme als sie nützt. 3. Sie eignet sich nur dann, wenn abhängig vom Browser auch etwas im Browser ausgeführt werden soll. Soll hingegen der Webserver Einsatzbedingungen

2 JA Browserseitiges Skripting: JavaScript WEI Seite 2 von 12 bspw. mit PHP oder Perl anderen Code für Netscape erzeugen als für den Internet Explorer, muss auch die Browserweiche serverseitig programmiert werden. Vorsicht ist geboten, wenn durch eine Browserweiche bestimmte Benutzer- und Benutzergruppen gänzlich von der Nutzung der Seite ausgeschlossen werden. Das ist nicht Sinn der Sache, da eine Browserweiche ja eben eine möglichst 100%-ige Nutzung der Seite gewährleisten soll. Gefahren beim Einsatz von Genauso problematisch wie die unterschiedlichen Browser- und Java- Script-Implementationen sind, ist auch die Tatsache, dass ständige neue Release-Versionen und Browser veröffentlicht werden. Das heißt, es werden eventuell Fehler beseitigt, für die die Browserweiche notwendig war oder es gibt Browser, die von der Browsererkennung der Browserweiche nicht korrekt erkannt werden. Das heißt eine ständige Wartung und Weiterentwicklung der Browserweiche ist erforderlich, wenn Sie auf ganz spezifische Browserversionen und Betriebssysteme abstellen. Schlecht gewartete können mehr Unheil anrichten als sie nützen. Positiv ist hier zu bewerten, dass Opera-Benutzer wenigstens nicht vom Betreten der Seite abgehalten werden, auch wenn sie gewarnt werden. Wichtige Browser erkennen Zwischen welchen Browsern und Betriebssystemen die Browserweiche unterscheiden soll, hängt davon ab, was Sie erreichen möchten. Wenn es darauf ankommt, für bestimmte Browser speziellen Code zu erzeugen oder diesen anzupassen bzw. auf spezielle Seiten weiterzuleiten, müssen Sie unter Umständen sehr spezielle Prüfungen durchführen. Ansonsten reicht unter Umständen auch aus, den Browsernamen zu ermitteln. Das hängt wie gesagt vom Einsatzzweck ab., die nur nach ein oder zwei bestimmten Browsern prüfen und für alle anderen keine Alternativen bieten, sind der falsche Weg. Sie schließen nämlich oft auch Browser aus, die die Seite unter Umständen sehr gut oder doch zumindest brauchbar anzeigen könnten. Für DHTML- und JavaScript-Skripte ist es oft aber schon ausreichend nur das verwendete Objektmodell zu kennen. Dazu reicht eine recht

3 Browserseitiges Skripting: JavaScript Seite 3 von 12 JA WEI einfache Prüfung aus, die unabhängig von der Version und dem Betriebssystem des Browsers ist. Beide Möglichkeiten werden hier vorgestellt. Browser am Objektmodell erkennen Das Objektmodell eines Browsers stellt eine Hierarchie der Seiteninhalte zur Verfügung. Basis ist das document-objekt, das die aktuell im Browserfenster geladene Seite repräsentiert. Abhängig vom verwendeten Objektmodell erfolgt der Zugriff auf verschiedene Inhalte der Seite, wie bspw. Grafiken, Absätze, Überschriftenebenen etc. auf andere Weise. Daher ist das Objektmodell wichtig, wenn Sie JavaScript- oder DHTML in Ihren Webseiten nutzen möchten. Zur Zeit gibt es drei wichtige Objektmodelle: Was ist ein Objektmodell? 1. Das W3C-DOM (DOM = Document Object Modell) ist vom W3C standardisiert und wird daher zukünftig wohl von einem Großteil der Browser unterstützt werden. Derzeit wird es fast vollständig bzw. sehr gut unterstützt, vom Internet Explorer 5.01 und höher, Netscape.x und höher, Mozilla 0.x und höher sowie Opera 5 und höher. 2. Das Microsoft-DOM (oft auch einfach als DOM bezeichnet) wurde von Microsoft entwickelt und in den Internet Explorer 4.x und höher integriert. Da alle folgenden Internet-Explorer-Versionen abwärtskompatibel sind, können auch sie mit dem DOM umgehen. Für den Internet Explorer 5 oder höher sollte aber vorzugsweise das W3C-Dom verwendet werden. 3. Das Netscape-Objektmodell war das erste Objektmodell, das überhaupt für JavaScript nutzbar war, und wird von allen Netscape-Navigator-Versionen (2.0 bis 4.x) verwendet, sowie von Opera 4.0 und früher sowie Internet Explorer 3.x und früher. Zwar wird das Netscape-Objektmodell von vielen älteren Nicht-Netscape-Browsern unterstützt, dennoch gibt es hier Differenzen. Der Zugriff auf Grafiken, Links, Formulare und Absätze erfolgt zwar in allen diesen Browsern auf gleiche Weise, nur der Netscape Navigator 4.x und höher kennt jedoch das Layer-Objekt, mit dem Sie auf <layer>-tags und <div>-tags zugreifen können. Wenn nachfolgend vom Netscape-Objektmodell die Rede ist, bezieht sich dies im Wesentlichen auf das Layer- Objekt, das für DHTML-Effekte im Netscape-Navigator erforderlich ist. Für den Zugriff auf Elemente einer Webseite per JavaScript ist das Objektmodell sehr wichtig, um Fehler zu vermeiden. In diesem Fall genügt oft eine einfache Browserweiche, die das Objektmodell ermittelt und mit der dann abhängig vom Objektmodell unterschiedlich auf die Elemente der Seite zugegriffen werden kann. Die Namen, Versionen und Welche Objektmodelle gibt es? Das Objektmodell erkennen

4 JA Browserseitiges Skripting: JavaScript WEI Seite 4 von 12 Betriebssysteme der Browser sind dabei von untergeordneter Bedeutung. /K0/JA_WEI/ browserweichedom.htm Prüfen, ob das Microsoft DOM unterstützt wird Um das Objektmodell zu erkennen, gibt es ein ganz einfaches Verfahren. Sie müssen lediglich prüfen, ob bestimmte Objekte, Methoden oder Eigenschaften des Objektsmodells verfügbar sind, die dies eindeutig kennzeichnen. Das sind document.layers (Netscape), document.getelementbyid (W3C) und document.all (Microsoft). Sie können die Existenz dieser Methoden und Eigenschaften mit einer einfachen if- Verzweigung prüfen. Der Ausdruck document.all im folgenden Listing hat bspw. den Wert true, wenn es die all-auflistung des document-objekts gibt. In diesem Fall unterstützt der Browser das Microsoft-DOM. 1: if (document.all) 2. { 3: document.write ("Microsoft"); 4: } DOM erkennen und ausgeben Auf die gleiche Weise können Sie auch die anderen Objektmodelle prüfen. Das folgende Listing zeigt dies und gibt für jeden Browser das unterstützte Objektmodell in einem eigenen Absatz aus. 1: <body> 2: <script type="text/javascript" language="javascript"> 3:  17: </script> 18: </body> Jeder Browser gibt nun das von ihm unterstützte Objektmodell aus.

5 Browserseitiges Skripting: JavaScript Seite 5 von 12 JA WEI Wie Sie schon an der Abbildung erkennen können, gibt der Internet Explorer hier sowohl Microsoft als auch W3C aus. Das ist ja auch richtig, da dieser beide Objektmodelle unterstützt. Dennoch sollten Sie sich bei einer solchen Browserweiche immer auf ein Objektmodell festlegen, das dann der Code auch unterstützt. Dazu brauchen Sie den hier vorgestellten Code nur in eine Funktion einzufassen, die immer das Objektmodell zurückgibt. Da nur das W3C-Dom standardisiert ist, sollten Sie es auch bevorzugen und nur dann auf die anderen Objektmodelle zurückgreifen, wenn die Browser das W3C-DOM nicht unterstützen. Dazu reicht es aus, die if-anweisung zur Prüfung auf das Microsoft-DOM (Zeile 4 bis 7 ) nur dann auszuführen, wenn nicht das W3C-Objektmodell unterstützt wird. Das folgende Listing gibt für den Internet Explorer 5.0 und höher nur W3C aus, für den Internet Explorer 4.x aber dennoch Microsoft. Als Rückgabewerte für die Funktion wurde allerdings W3C, MS und NN gewählt um die Handhabung der Funktion zu vereinfachen. 1: <body> 2: <script type="text/javascript" language="javascript"> 3:  28: </script> 29: </body> Nur das favorisierte DOM ermitteln Browsername, -version und Betriebssystem ermitteln Auch wenn die Ermittlung des unterstützten DOMs sehr oft ausreicht, ist es manchmal notwendig einen Browser genauer hinsichtlich Version und Betriebssystem zu ermitteln. Das kommt bspw. vor, wenn ein bestimmter Browser Fehler hat, die Sie durch Verwendung anderer StyleSheets oder HTML-Ausgaben beheben möchten.

6 JA Browserseitiges Skripting: JavaScript WEI Seite von 12 Probleme der Browseridentifikation Browsername und Version feststellen /K0/JA_WEI/browserweiche. htm Browserversion und Name ermitteln Leider gibt es ein großes Problem beim Identifizieren des Browsers. Sie können nur das ermitteln, was der Browser liefert, und diese Informationen können mit geeigneten Mitteln manipuliert werden. Bspw. ist es problemlos möglich, mit manipulierten Opera-Versionen vorzutäuschen, dass ein Internet Explorer verwendet wird. Das heißt dann natürlich noch lange nicht, dass dieser Opera-Browser auch alles kann, was der Internet Explorer kann. Hier lauert demnach eine große Falle. Viele Informationen lassen sich direkt über die entsprechenden Java- Script-Objekte ermitteln. Es gibt aber einiges, was Sie manuell berechnen müssen. Name, Version und Betriebssystem geben bspw. die Eigenschaften appname, appversion und platform des navigator- Objekts zurück. Allerdings ist hier größte Vorsicht geboten, wie die folgende Abbildung zeigt. Opera lässt sich nämlich so einstellen, dass es sich als Netscape oder Internet Explorer ausgibt. Dies führt dazu, dass es bei Abruf der vorgenannten Eigenschaften von sich behauptet der Internet Explorer 5 zu sein. Auch die so gelieferten Versionsangaben sind mit Vorsicht zu genießen. Zwar melden Opera und Internet Explorer und Opera die Version 4.0 des Internet-Explorers aus den genaueren Angaben, innerhalb der Klammern ergibt sich jedoch die Version 5 bzw..0. Auch die Versionsangabe des Mozilla-Browsers ist nicht korrekt. Zwar gibt er sich als Netscape 5 aus, diese Version gibt es aber offiziell nicht. Der hier verwendete Mozilla-Browser hat aber die Version 1.1 und entspricht damit Netscape 7. Im folgenden Beispiel sehen Sie, wie die unten abgebildeten Daten ermittelt werden. 1: <script type="text/javascript" language="javascript"> 2:  7: </script> Ausgabe der Browserversion, des Namens und des Betriebssystems