Javascript ist Toll!

Die 4 fiesesten Javascript IE Probleme

Ich frag mich warum ich diesen Artikel nicht schon viel früher geschrieben habe. Ich habe diese Probleme schon viele Male gelesen und immer wieder musste ich selbst suchen wo das Problem liegt. Ich habe also oft genug selbst mit diesen Problemen zu kämpfen gehabt und habe wertvolle Lebenszeit damit verschwendet, Bugs zu finden, die keine waren.

Deshalb habe ich hier mal die Liste der größten und am schwersten zu findesten IE Bugs beim programmieren von Javascript, zusammengestellt.

1. Verschmutzung des globalen Namenspace
2. NodeList wird nicht live erweitert
3. Ein Komma zuviel
4. 4. utf-8 Skripte in utf8 Dokumente einbinden

Der erste Bug ist nach meinem Gefühl auch der Häufigste der in Foren auftaucht. Er kann sich unterschiedlichster Stelle bemerkbar machen und ist manchmal wirklich schwer zu erkennen. Wenn diese IE Besonderheit zum tragen kommt, spielt aber immer auch eine Nachlässigkeit des Programmierers eine Rolle, wenn er mit dieser Geschichte konfrontiert wird (s. Lösung).

1. Verschmutzung des globalen Namespace

Beschreibung

Im IE werden alle HTML Elemente die mit Namen oder IDs auch über window['name'] oder window['id'] ansprechbar sind, als Eigenschaft des window Objekt erweitert. Das heißt, wenn ein Element den Namen test hat, kann im Javascript über test auf das Element zugegriffen werden.

Beispiel

Das Beispiel funktioniert nur im IE, in anderen Browsern sollte eine JS Fehlermeldung, dass die Variabel undefiniert ist, in der Fehlerkonsole angezeigt werden.

Das nachfolgende Element DIV, hat die id test_id:

Ein alert(test_id.tagName) ergibt folgendes: klick

Ein zweites Beispiel mt dem name Attribut. Das Bild hat den Namen test_name:

Wie oben, ein alert(test_name.tagName) ergibt folgendes:klick

Nachtrag 25.11.2012: Tja, so kann es auch gehen, das W3C hat dieses Verhalten mittlerweile zum Standard erklärt und jetzt zeigen alle Standardkonformen Browser das alert().

The Window interface supports named properties. The supported property names at any moment consist of:

• the browsing context name of any child browsing context of the active document whose name is not the empty string,
• the value of the name content attribute for all a, applet, area, embed, form, frameset, img, and object elements in the active document that have a name content attribute, and
• the value of the id content attribute of any HTML element in the active document with an id content attribute.

Lösung

Eine wirkliche Lösung dafür gibt es nicht, denn dieses Verhalten läßt sich dem IE nicht austreiben. Das Schlimmste läßt sich aber vermeiden, wenn konsequent var benutzt wird. Wenn eine Variabel mit var deklariert wird, wird sie nicht überschrieben, egal wo diese Deklaration steht. Das bedeutet, wenn im HTML Code ein benanntes (mit einer id oder name) Element vorkommt und irgendwo im Dokument oder in einem eingebundenen Skript, wird die gleiche Bezeichung als globale Variabel verwendet, dann hat diese Variabel den Vorzug und auf das Element kann nicht mehr so zugegriffen werden.

Versionen

Alle, egal ob im Standardmode oder Quirksmode

2. NodeList wird nicht live erweitert

Beschreibung

Wenn es mehrere Elemente mit dem gleichen Namen gibt, erweitern die Browser diese zu einer NodeList, die in Javascript ähnlich wie ein Array ansprechbar ist (aber nicht deren Methoden hat, wie z.b. push()). Wenn mit JS ein Element mit eineme gleichen Namen in das Dokument hinzugefügt wird, wird dieses nicht in eine NodeList aufgenommen. Es ist also nicht über die üblichen Methoden erreichbar (document.forms.elements, documen.images), was immer wieder zu Verwirrung führt.

Beispiel

Die beiden Bilder, haben den Namen b und sind über document.images.b erreichbar. Der folgende Link fügt ein Bild mit dem gleichen Namen zum Dokument dazu: neues Bild. Es wird folgende Funktion ausgeführt:

function add() {
	var el = document.getElementById('img');
	var neu = document.createElement('img');
	neu.name = 'b';
	neu.src = '/js/bilder/foto1.jpg';
	alert('Vor dem einfügen: ' + document.b.length);
	el.appendChild(neu);
	alert('Nach dem einfügen: ' + document.b.length);
	return false;
}

Alle Browser, ausser dem IE geben folgende Meldungen aus:

Vor dem einfügen: 2
Nach dem einfügen: 3

Der IE zeigt zweimal die 2. Das neue Bild ist nicht in der NodeList. Das Gleiche passiert auch bei Formularelementen.

Lösung

Hier gibt es nur einen fiesen workaround mit try {] catch(e) {} oder etwas eleganter mit Conditional Compilation .

function createNamedElement(tag, name) {
	var IE = /*@cc_on!@*/false; 
	if(IE) tag = '<' + tag + ' name="' + name + '">';
	var neu = document.createElement(tag);
	neu.name = name;
	return neu;
}

Und so funktioniert es dann auch im IE:Lösung.

Versionen

Alle, egal ob im Standardmode oder Quirksmode

3. Ein Komma zuviel

Beschreibung

Wenn ein Objekt mit Literalen deklariert wird, darf am Schluss vor der schliessenden Klammer, kein Komma stehen. Da ansonsten der IE den unten stehenden Fehler meldet. Dieser Fehler ist oft schwer zu finden, da das Komma, vor allem in komplexen Strukturen, leicht zu übersehen ist. Alle anderen Browser ignorieren das Komma.

Beispiel

Der folgende Code erzeugt die Fehlermeldung: Bezeichner, Zahlenfolge oder Zahl erwartet, weil hinter der zwei ein Kommat steht und der IE als einziger Browser dieses nicht ignoriert.

var x = {
a: 1, 
b: 2,
};

Lösung

Das Komma suchen ;-).

Versionen

Alle.

Nachtrag 2.2.2010: Der IE 8 hat im document Mode diesen Fehler beseitigt, ein kleiner Schritt für die Menschheit, ein grosser für den IE ;-)

4. utf-8 Skripte in utf8 Dokumente einbinden

Wenn die Kodierung des Dokuments utf-8 ist und die eines eingebundenen Skripts eine andere, zeigen die IEs eine schwer nachvollziehbare Fehlermeldungan, wenn Sonderzeichen in dem Skript sind. Andere Browser stellen einfach falsch kodierten Zeichen dar. Sehr schwer wird es, wenn die Sonderzeichen in Code Kommentaren enthalten sind. Da die Fehlermeldung: Nicht abgeschlossene Zeichenfolgenkonstante, nur schwer zu deuten ist.

Beispiel

Lösung

Der sicherste und Zukunfsträchtigste Weg ist: Die Skripte immer als utf-8 abspeichern und im script-Tag die Kodierung angeben. Das Funktioniert auch in anderen Browsern und führt als Nebeneffekt dazu, dass die Sonderzeichen auch richtig angezeigt werden (wenn diese z.b. mit alert() ausgegeben werden sollen). Das sieht dann so aus:

<script type="text/javascript" src="test_utf.js" charset="utf-8"></script>

Versionen

IE 4, 5, 6 (7)

Ich hoffe ich konnte vielleicht den einen oder anderem Suchenden helfen, denn wie schon gesagt, mich haben diese Probleme auch schon oft genervt.