Javascript ist Toll!

27. Januar 2010 - 12:31

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 DIV mit der 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:

Beispiel

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

Beispiel 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:

javascript
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 .

javascript
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.

javascript
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.

Ähnliche Artikel

  • 2. Februar 2008 -- Wordpress und Javascript (3)

    Nachtrag: 11.11.2009 Das meiste was in dem Artikel steht, scheint für die Version 2.8.x hinfällig zu sein. Die Funktion wptexturize() hat endlich einen Trigger auf das Code-Tag und vermurkst nicht...

  • 12. September 2007 -- focus() Probleme mit Firefox (6)

    Firefox hat seit Urzeiten Probleme damit in bestimmten Fällen den Fokus auf ein Textfeld zu setzen. Einmal, wenn der Fokus unmittelbar nach einem onblur Event gesetzt werden soll und wenn vor dem Fokus...

  • 27. Oktober 2012 -- Tween Beispiele (0)

    Das Tween Objekt Ich vertiefe hier noch einmal die Verwendung meines Tween Objektes. Hier zeigt sich, wie einfach und effektiv es sich nutzen lässt. Der Code um eine Animations zu erzeugen ist sehr...

Comments (9)
15160 mal gelesen.
flattr

9 Kommentare

Hinterlasse einen Kommentar »

Seiten:

1. Kommentar von: Albert
9. Februar 2010: 09:41

Vielen Dank! Die beschriebenen Bugs haben mich schon irritiert, aber hier schön aufgelistet.

Grüße

2. Kommentar von: Micha
9. Februar 2010: 21:35

Hi,

schöne Zusammenstallung. Das mit der Zeichenangabe beim Einbinden des Scripts wusste ich noch gar nicht.

Was ich immer wieder gern nutze ist:
try { th.style.cursor = "pointer"; } catch(e){ th.style.cursor = "hand"; }

Der IE6 (oder tiefer) kann mit pointer ja bekanntlich nicht viel anfangen….

Schöne Grüße
Micha

P.S. kleinen Tippfehler gefunden im Link oben: “Verscmutzung des globalen Namenspace”

3. Kommentar von: Gregor
22. April 2010: 13:23

Klasse Auflistung und Beschreibung.

Ein paar Tippfehler in diesem Satz:

Falsch: “Ein zweites Beispiel mt den name Attribuit.”
Richtig: “Ein zweites Beispiel mit dem Attribut ‘name’.”

4. Kommentar von: Struppi
22. April 2010: 13:31

Danke.

5. Kommentar von: Marcel Stannek
6. September 2010: 14:41

Fehler #4 hätte ich gern schon vorher gekannt, hätte mir heute viel Ärger erspart.

Sehr fies ein End-Script Tag innerhalb Script-Blockes zu schreiben. Der IE hört nach dem 1. Auftreten einfach auf den (gültigen) Rest als Javascript zu behandeln. Besonders, wenn der eingefügte Scriptteil sehr komplex ist und die genutzen Highlighter es korrekt anzeigen macht das Spass beim suchen :/.


document.writeln('');

PS: vorschau funktion für die kommentare wäre ganz nett.

6. Kommentar von: Stex
23. Oktober 2010: 18:40

Vielen Dank für die schöne Auflistung, ich hatte heute länger mit #1 zu kämpfen…

7. Kommentar von: Lutz
13. November 2012: 22:10

Hi,
heute hat mich eines dieser 4 fiesen Javascript-IE-Probleme bei der Arbeit zu schaffen gemacht:
“Fehlermeldung: Bezeichner, Zahlenfolge oder Zahl erwartet” und bei der Recherche bin ich auf Deinen Artikel gestoßen.

Vielen Dank für die schöne Auflistung :) bei mir war’s allerdings kein falsch gesetztes Komma. Der Fehler kommt auch, wenn man im IE < 9 im JSON-Objekt seine Eigenschaften so nennt, wie es dem IE nicht gefällt. Beispiel: {attr:{class:"ui-widget-content"}

Eigenschaftennamen wie 'class' sind in der alten JScript-Engine wohl reservierte Schlüsselworte, bei denen sich der ältere IE etwas pingelig anstellt.

Der Fehler ließ sich beheben, wenn man das Schlüsselwort in ' oder " einfasst: {"attr": {"class": "ui-widget-content"}

Vielleicht könnte man das noch ergänzen :)

Grüße
Lutz

8. Kommentar von: Lutz
13. November 2012: 23:13

ups, die zweite } vergessen ;)

9. Kommentar von: Struppi
14. November 2012: 10:00

Danke für deinen Kommentar.

Aber das ist kein IE spezifisches Problem, auch in älteren Firefox konnte man keine reservierten Wörter als Objekteigenschaftsbezeichnung verwenden.

Ich war sogar erstaunt, als ich das aufgrund deines Kommentares ausprobiert habe, dass es überhaupt geht und sogar alle reservierten Wörter als Bezeichnung möglich sind. Der aktuelle Opera läßt ebenfalls alle zu, Chromium 6.0 hingegen nicht – aber das ist eine Version von 2010.

Hinterlasse einen Kommentar

Name (erforderlich)
Mail (wird nicht angezeigt) (erforderlich)
Website

Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful