Werbung einblenden Werbung ausblenden


Home / Tutorials / JavaScript Handbuch / cross Browser Programmierung


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.

Unterschiede bei DHTML

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.

vorhergehendes Kapitel