| 
cross browser Programmierung
Unterschiede im Zusammenhang mit XML
Unterschiede im Hinblick auf Cascading Style
Sheets
Unterschiede wie auf CSS zugegriffen wird
Unterschiede bei DHTML
Für User programmieren, die JavaScript abgeschaltet
haben
| cross
browser Programmierung |
|
Wie überall bekannt, ist das größte
Hinderniss für den Einsatz von JavaScript die teilweise
unterschiedliche Implementierung in Netscape und Explorer.
Desaströs war die Situation, als noch für Netscape
4.X und Explorer 5.X programmiert werden musste, da die Unterschiede
zwischen den Browser hier so enorm waren, dass streckenweise
der eigentliche JavaScript Code, der die Funktionalität
realisierte, gleich zweimal programmiert werden musste. Ab
den 6 Versionen beginnen sich die beiden Browser einander
anzunähern um. Bemerkenswert ist, dass Netscape 6 + von
Netscape 4.X erheblich abweicht, insbesondere was DHTML angeht.
Das heisst, Netscape 6+ ist mit Netscape 4.X nicht kompatibel.
Da davon auszugehen ist, dass sich Netscape 4.X vom Markt
verabschiedet, ist es am günstigsten, diesen Browser
einfach zu vergessen. Das Problem, cross browser compatibel
zu programmieren, zerfällt in zwei Probleme. Erstens
muss man die Unterschiede kennen, in der der jeweilige Browser
ein Objekt, eine Methode oder eine Eigenschaft zur Verfügung
stellt und ob er sie überhaupt zur Verfügung stellt.
Zweitens muss man es fertig bringen, zwischen den beiden Browsern
zu diskriminieren. Das zweite Problem ist einfach zu lösen,
das erste nicht. Das erste Problem ist wohl nur mit "trial
and error" zu lösen. Das heisst, man programmiert
es zuerst für den einen Browser und testet dann, ob es
im anderen Browser funktionniert. Anschliessend versucht man
herauszufinden, woran es "hapert". Ohne
irgendeinen Anspruch auf Vollständigkeit,
seien hier mal beispielhaft einige Unterschiede genannt. Es
kann hierbei nicht mal garantiert werden, dass die hier genannten
Probleme in Zukunft auch noch existieren. Unter Umständen
kommt es auch bei den hier genannten Punkten in Zukunft zu
einer Annäherung. Wir fassen hier lediglich das an anderen
Stellen des Handbuches bereits Gesagte nochmal zusammen.
| Unterschiede
im Zusammenhang mit XML |
|
Die Art, wie ein XML Objekt generiert wird,
ist unterschiedlich
Im Kapitel Mit
JavaScript XML Dokumente parsen finden sich ein Beispiel,
wie man cross browser compatibel ein XML Dokument parst. Wir
fassen das Wesentliche nochmal zusammen.
Eine Instanz eines XML Dokumentes wird mit Netscape 6+ so
kreiert.
xml_dokument = document.implementation.createDocument("",
"", null);
und mit dem Internet Explorer 6+ so
xml_dokument = new ActiveXObject("Microsoft.XMLDOM");
Das heisst im Umkehrschluss, ist das Objekt
document.implementation vorhanden, dann handelt es sich offensichtlich
um Netscape, der Explorer kennt dieses Objekt nicht. Ist das
Objekt ActiveXObject vorhanden, so handelt es sich offensichtlich
um den Explorer. Wenn man das weiss, kann man zwischen den
zwei Browsern diskriminieren.
if (document.implementation.createDocument)
{
xml_dokument = document.implementation.createDocument("",
"", null);
}
else if(window.ActiveXObject)
{
xml_dokument = new ActiveXObject("Microsoft.XMLDOM");
}
Im Hinblick auf XML gibt es noch zahlreiche andere Unterschiede,
die im Kapitel Mit JavaScript
XML Dokumente parsen beschrieben werden.
| Unterschiede
im Hinblick auf Cascading Style Sheets |
|
Die Unterschieden im Hinblick auf Cascading
Style Sheets können darin bestehen, dass eine bestimmte
Formatierung in einem Browser gar nicht implemtiert ist, anders
implementiert ist oder dass der Zugriff auf diese CSS Formatierung
anders ist. Wir verweisen für die Details auf das Kapitel
Cascading Style Sheets.
Beispielsweise können bei Netscape 6+ CSS Formatierungen
in Abhängigkeit eines Element Attributes definiert werden,
was mit dem Explorer 6+(noch) nicht möglich ist. Im Gegenzug
kennt der Explorer weit mehr Filter.
| Unterschiede
wie auf CSS zugegriffen wird |
|
Will man mehrere CSS Formatierungen auf einen Schlag ändern,
dann geht das nur über das Objekt rules (Explorer 6+)
bzw. cssruler (Netscape). Die Details mit Beispielen kann
man im Kapitel Zugriff
auf Cascading Style Sheets mit JavaScript nachlesen. Man
muss also wieder zwischen den zwei Browsern diskriminieren.
Das Sinnvollste ist hierbei, zu prüfen, ob das Objekt,
das man braucht vorhanden ist. In diesem Fall wäre es
also das günstigste zu prüfen, ob das Objekt rules
bzw. css rules existiert. (Nebenbemerkung: Eine Seite kann
mehrere stylesheets haben, auf die verschiedenen stylesheets
hat man Zugriff über den Array styleSheets[]. Innerhalb
eines stylesheets sind mehrere Klassen und Ids formatiert,
auf diese wiederum kann man über die Arrays rules[] bzw.
cssrules[] zugreifen.) Wir können also mit diesem Schnipsel
herausfinden, mit welchem Browser wir es zu tun haben.
if (document.styleSheets[0].cssRules) die_Formatierungen
= document.styleSheets[0].cssRules;
else if (document.styleSheets[0].rules) die_Formatierungen
= document.styleSheets[0].rules;
else alert("Das ist keine sechser Version von Explorer
oder Netscape");
Wir prüfen also, ob das Objekt cssRules existiert.
Existiert es, hat es einen Wert, der auf jeden Fall nicht
false oder undefined ist, siehe Bedingte
Anweisungen. Wenn es existiert, kreieren wir einen Zeiger
auf dieses Objekt (die_Formatierungen). Das gleiche machen
wir nochmal für Netscape. Diesen Ansatz kann man allgemeiner
formulieren. Meistens ist es am sichersten, man prüft
die Vorhandensein des im jeweiligen Kontext gebrauchten Objektes.
Man könnte natürlich dasgleiche so erreichen.
if (document.all){ die_Formatierungen =
document.styleSheets[0].cssRules;}
else { die_Formatierungen = document.styleSheets[0].rules;}
In weiten Bereichen dieses Handbuches wurde so gearbeitet
und viele Skripte arbeiten so. Sie prüfen das Vorhandensein
von document.all (dass alle layers hält) und unterscheiden
so die beiden Browser. Der sicherste Weg ist das nicht. Erstens
ist document.all eigentlich obsolet, weil document.getElementById("id")
der allgemeinere, browserkompatible Ansatz ist, und document.all
unter Umständen in Zukunft verschwindet und zweitens
bedeutet die Tatsache, dass document.all vorhanden ist, noch
lange nicht, dass auch das Objekt, dass man gerade braucht,
auch vorhanden ist, schliesslich gibt es ja auch vom Internet
Explorer mehrere Versionen.
Rund um DHTML gibt es zahlreiche Unterschiede
zwischen den jeweiligen Browsern, wenn sich die Unterschiede
auch bei den 6 Versionen drastisch reduziert haben und man
die Hoffnung haben kann, dass sich in nicht mehr allzu ferner
Zukunft die Konzepte tatsächlich angleichen werden. Am
weitesten auseinander liegen die Browser noch bei drag and
drop, siehe drag and drop.
Hier ist es mit dem simplen Einbauen einer Weiche in Form
einer if-Bedingung nicht mehr getan. Im wesentlichen gibt
es folgende Unterschiede
Auf das Objekt, dass die Eigenschaften speichert,
des Mauscursors zum Zeitpunkt des Auftretens des Ereignisses
speichert, ist anders implementiert.
Auch wenn die gleichen Eigenschaften abgefangen
werden, so haben sie unterschiedliche Namen
Der Explorer greift manche Eigenschaften ab,
wie die Position des Mauszeigers innerhalb des angesprochenen
Objektes (offset), die Netscape nicht abgreift.
Netscape kennt eine Methode, addEventListener,
ein Ereignis direkt an ein Element zu binden, die der Explorer
wiederum nicht kennt.
Benötigt wird also ein "work around"
für alle diese Unterschiede.
Will man z.B. ermitteln, über welchem Objekt
des Dokumentes das Mausevent eingetroffen ist, braucht man
sowas.
if(!document.all)
{
event=e;
objekt=e.target.id;
}
else
{
objekt=event.srcElement.id;
}
Das event Objekt, das z.B. speichert, wo die
Maustaste gedrückt wurde, steht im Explorer als globale
Variable zur Verfügung, während es bei Netscape
als, wenn auch nicht sichtbar, als Parameter beim Funktionsaufruf
übergeben wird. Man muss also erstmal dafür sorgen,
dass event den gleichen Wert hat, indem man den Zeiger auf
das Objekt (in unserem Falle e) dem event zuweist.
event=e;
Damit sind wir leider immer noch nicht fertig,
denn auf das Objekt unterhalb des events wird anders zugegriffen.
Bei Netscape heisst das Objekt unterhalb des Mauscursors target,
beim Explorer scrElement. Wir brauchen also zwei verschiedene
Schreibweisen.
Für Netscape:
objekt=e.target.id;
Für den Explorer: objekt=event.srcElement.id;
Ein vollständiges Beispiel mit Erklärung
findet sich im Kapitel drag
and drop.
| Für
User programmieren, die JavaScript abgeschaltet haben |
|
Es gibt unterschiedliche Gründe, warum
ein User JavaScript komplett deaktiviert. Ein Grund kann sein,
dass er von den pop up Fenstern so entnervt ist, dass er sich
zu einer Radikal Kur entschliesst und JavaScript, dass diese
pop up Fenster ja aufbaut, komplett deaktiviert.
By the way um JavaScript zu deaktivieren:
Extras->Internetoptionen->Sicherheit->Stufe
anpassen->Scripting->deaktivieren (Explorer),
Bearbeiten->Einstellungen->Doppelclick
auf Erweitert->Scripts & Plugins-> Kästchen
"Aktiviere JavaScript für Navigator" deaktivieren
(Netscape)
Ist eine Website nun so konzipiert, etwas weil
die Menüführung über JavaScript realisiert
wird, dass sie ohne JavaScript nicht betrachtet werden kann,
so macht es unter Umständen Sinn, eine "Weiche"
einzubauen, die den User, der JavaScript deaktiviert hat,
auf eine andere Seite weiterleitet.
|
 |
