Browserweichen mit JavaScript

Ähnliche Dokumente
Inhalt. Vorwort 13. Einleitung JavaScript-Grundlagen 17

Glossar. SVG-Grafiken in Bitmap-Grafikformate. Anweisung Eine Anweisung ist eine Folge aus Schlüsselwörtern, Variablen, Objekten,

Ereignisse Auf Benutzereingaben reagieren

Michael Seeboerger-Weichselbaum. Das Einsteigerseminar JavaScript 4., überarbeitete Auflage

Online-Publishing mit HTML und CSS für Einsteigerinnen

Internet-Technologien

Inhalt. Vorwort 13. Einleitung 15. Für wen ist dieses Buch gedacht? 15 Zum Aufbau des Buchs Installation und erste Schritte 17

Das Einsteigerseminar

Funktionen nur wenn dann

Funktionen in JavaScript

Programmieren im Web 2.0

Multimedia im Netz. Übung zur Vorlesung. Ludwig-Maximilians-Universität Wintersemester 2010/2011

Anwender- dokumentation

Funktionen nur wenn dann

Grundlagen Internet-Technologien. Clientseitige Web-Programmierung

JavaScript II. Hochschule Karlsruhe Technik & Wirtschaft Internet-Technologien T3B250 SS2014 Prof. Dipl.-Ing. Martin Schober

JavaScript clientseitige Programmiersprache zur Dynamisierung von Internetseiten

Inhaltsverzeichnis. Vorwort... XIII

Klausurteilnehmer. Wichtige Hinweise. Note: Klausur Informatik Programmierung, Seite 1 von 8 HS OWL, FB 7, Malte Wattenberg.

Angreifbarkeit von Webapplikationen

W7 Projekt im Zusammenhang Gästebuch

Multimediale Web-Anwendungen. JavaScript. Einführung. MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 1.

2. WWW-Protokolle und -Formate

PHP eine Einführung. Dipl.-Inf. Frank Hofmann. 18. November Potsdam

DOM Document Object Model

01 Einführung in PHP. Einführung in PHP 1/13 PHP in Aktion

Vielen Dank, dass Sie sich für die Software der myfactory International GmbH entschieden haben.

JavaScript. Dies ist normales HTML. Hallo Welt! Dies ist JavaScript. Wieder normales HTML.

Barrierefreies Web. Web-Sites so gestalten, dass jeder sie nutzen und lesen kann. Zielkonflikte: barrierefreies Web für kommerzielle Anbieter

Funktionen in JavaScript

PPS-Veranstaltung. 1. Praxisveranstaltung

ActiveX Scripting IE und DHTML (DOM): Architektur, Beispiele (Object Rexx)

Schleifen in Javascript

Funktionen in PHP 1/7

Erlernbarkeit. Einsatzbereich. Preis. Ausführungsort

HOLIDAY-FERIENWOHNUNGEN.COM Anleitung zur Aktivierung von Java Script und Informationen über Cookies

Fragen und Antworten:

Kommunikationsnetze. 7. Das World Wide Web 7.4 Client- vs. Server-basierte Techniken für dynamische Webseiten

JavaScript O'REILLY. Das umfassende Referenzwerk. Deutsche Übersetzung von Ralf Kuhnert, Gisbert W. Selke & Harald Selke

Es gibt immer einen Schlüssel und einen zugehörigen Wert,

XML Eine Einführung. XML-Dokumente Im Internet Darstellen. XML (C) J.M.Joller 1

Geschäftsprozesse Benutzerschnittstelle

Interaktion Java und JavaScript

Überblick. Klassen Optionale Typen DOM. Optionale Parameter Klassen. Einführung. 2 Motivation 3 Werkzeuge 4 Demonstration 5 Dart

Web-Techniken Einführung in JavaScript

Sicherheit in Rich Internet Applications

Multimediale Werkzeuge. Textformate, Medienobjekte

Klausur Informatik Programmierung, Seite 1 von 8 HS OWL, FB 7, Malte Wattenberg

W7 Projekt im Zusammenhang Gästebuch

Einführung Internettechnologien. - Clientseitige Programmierung -


INHALTS VERZEICHNIS. Einleitung 11 Der lange Weg zu Expression Web 11 Was Expression Web von Dreamweaver und GoLive unterscheidet 15

DYNAMISCHE SEITEN. Warum Scriptsprachen? Stand: CF Carola Fichtner Web-Consulting

Content-Filter und ähnliches (z.b. AdBlock für Firefox) dürfen die Kommunikation nicht behindern.

E-Learning Manager. Technische Voraussetzungen

Grundlagen Internet-Technologien INF3171

E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 4: Einführung in JavaScript Stand: Übung WS 2014/2015. Benedikt Schumm M.Sc.

Webseiten sind keine Gemälde. Webstandards für ein besseres Web. Webstandards für ein besseres Web

Radius Online-Campus. PC-technische Voraussetzungen

Inhaltsverzeichnis. Teil I Installation und erste Schritte 19. Vorwort 11. Einleitung Grundlagen und Installation 23

Christian Wenz JavaScript Browserübergreifende Lösungen

Kompendium der Web-Programmierung

Grundlagen zu HTML. Vortrag im Rahmen der BTK-Vorlesung von Herrn Professor Kärger

Erstellen von Web-Seiten HTML und mehr...

5.1 Bestehende Projekte bearbeiten Neue Projekte erstellen 85

Article Widgets für Publisher

Datenbankprogrammierung mit MySQL 5 und PHP 5 Spona

Multimedia im Netz Wintersemester 2011/12

Browsereinstellungen. Inhaltsverzeichnis. SLF ebanking

PDF created with FinePrint pdffactory trial version Dreamweaver - Schulung, Cosima Joergens, S. 1

CASCADING STYLE SHEETS WEBSEITEN-GESTALTUNG MIT CSS

JavaScript Basiskonzepte

HTML-Seiten mithilfe von JavaScript durch die Bearbeitung von DOM-Elementen aktualisieren. Mit jquery diese sogar animieren.

Klassen und Objekte. Klassen sind Vorlagen für Objekte. Objekte haben. Attribute. Konstruktoren. Methoden. Merkblatt

«Integration in WebSite» HTML-/Javascript-Code-Beispiele

Stand und Ausblick

Anleitungen zum Zugriff auf die Dokumentation

HTML5, JavaScript und jquery

1 Unterschiede zum WinCC Basissystem

Node.js Einführung Manuel Hart

Installation SuperWebMailer

Objekte haben eine eigene Notation, also Schreibweise, beim Aufruf:

HOB RD VPN Web Server Gate

Internet und Webseiten-Gestaltung

Partner-ID in eigenen Seiten verwenden

Handbuch ECDL 2003 Basic Modul 7 Abschnitt 1: Information Internet Explorer starten, Eingabe einer URL und Navigation im Internet

Transkript:

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

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

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

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: <!-- 4: if (document.all) 5: { : document.write ("<p>microsoft</p>"); 7: } 8: if (document.getelementbyid) 9: { 10: document.write ("<p>w3c</p>"); 11: } 12: if (document.layers) 13: { 14: document.write ("<p>netscape</p>"); 15: } 1: //--> 17: </script> 18: </body> Jeder Browser gibt nun das von ihm unterstützte Objektmodell aus.

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: <!-- 4: 5: function getdom() : { 7: if (document.getelementbyid) 8: { 9: return "W3C"; 10: } 11: else 12: { 13: if (document.all) 14: { 15: return "MS"; 1: } 17: if (document.layers) 18: { 19: return "NN"; 20: } 21: } 22: } 23: 24: if (getdom()=="ms") {document.write ("<p>microsoft</p>");}; 25: if (getdom()=="nn") {document.write ("<p>netscape</p>");}; 2: if (getdom()=="w3c") {document.write ("<p>w3c</p>");}; 27: //--> 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.

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: <!-- 3: document.write ("<p>" + navigator.appname + 4: "</p><p>" + navigator.appversion + 5: "</p><p>" + navigator.platform + "<p>"); : //--> 7: </script> Ausgabe der Browserversion, des Namens und des Betriebssystems