In letzter Zeit bin ich immer wieder auf Probleme mit dem IE im zusammenhang mit jQuery gestoßen. Weil ich zu den Problemen wenig nichts im Netz gefunden habe, gibt es diesen Beitrag.
Das erste Problem, was sich recht schnell lösen lässt, ist, dass der Internet Explorer zuweilen das $-Zeichen nicht mag und einen Fehler ausgibt, dass er das Element nicht kennt. Mein Lösungsvorschlag: Entweder die noConflict()-Funktion von jQuery verwenden oder, was ich besser finde, “$” einfach durch “jQuery” ersetzen.
Jetzt wird es schon etwas interessanter. Problem Nr. 2:
Der IE will in einigen Fällen Elemente, die einfach per ID angesprochen werden nicht kennen. Beispiel:
$("#loaderBox").html("test");
Eine Logik konnte ich hinter dem Problem nicht erkennen, meine Lösung jedenfalls ist, vor jedes per ID ausgewählte Element den jeweiligen Elementtyp zu schreiben:
$("div#loaderBox").html("test");
Und jetzt zur letzten Falle, in die wir beim IE leicht tappen können und die das Senden eines XMLHttpRequests (Ajax-Request) im Internet Explorer aller (zumindest 7 und 8) Versionen unmöglich macht und mit der netten Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht. (Bezieht sich auf das gerade genannte XMLHttpRequest-Objekt) quittiert wird. Das Problem ist die Stelle der Definition der jQuery Javascript-Datei – Ich hatte mein jQuery-File natürlich sauber im Head definiert. Ich zitiere selfHTML:
Es ist unter JavaScript-Programmierern zur Gewohnheit geworden, einen solchen Bereich [Javascript-Tag] im Kopf der HTML-Datei, also zwischen <head> und </head> zu definieren.
- selfHTML
Nach einigen Gläsern Tee und einer Menge verbratenen Hirnzellen, offenbarte sich mir die Lösung des Problems: Das jQuery-Script im Body definieren. Ist nicht schön, aber funktioniert – Ich muss mich in dieser Angelegenheit wohl dem IE geschlagen geben..
Edit:
Heute ist mir eine weitere “Falle” im Internet Explorer aller Versionen aufgefallen:
Ich habe einen Button mit der id “phoneBtn”, dessen jQuery-Object ich in eine JS-Variable laden möchte. Wir haben folgenden Code:
phoneBtn = $('#phoneBtn');
Klappt auch im Firefox, der IE hingegen meldet sich mit “Das Objekt unterstützt die Eigenschaft oder Methode nicht!”. Interessanterweise ist die Lösung hier, anstatt einer globalen eine lokale Variable zu verwenden – Mit dem Schlüsselwort “var” funktioniert das ganze auch im Internet Explorer. Um das ganze noch etwas performanter zu machen und Problem 2 zu umgehen definiere ich zusätzlich noch den Elementtyp – In meinem Fall ein Button (input).
var phoneBtn = $('input#phoneBtn');
Besten Dank für den Tip, das jQuery-Objekt im Body zu definieren. Bei mir haut das allerdings nur hin, wenn ich das script-Tag für die Einbindung der jquery.js in den Body verlagere (und damit auch alle anderen js.Dateien). Da ich dies nicht so gern möchte: hast Du das jQuery-Objekt definieren können und trotzdem die js-Includes im Header belassen können?
(Übrigens würde mich ja noch interessieren, wann genau dieses Problem auftritt, denn in zwei nahezu gleichen Konfigurationen (IE8 auf Vista) gibt es auf einem Rechner besagte JS-Probleme, auf dem anderen nicht. Komisches Ding.)
Danke für diese echt hilfreiche Sammlung an Tipps,
hab damit einige IE Fallen entlarven und beheben können.
Mir ist bei meinen IE-Fixing arbeiten noch ein weiteres Problem aufgefallen
for(i = 0; i <= 10; i++){ //do something }funktioniert im FF im IE wird gemozt…
beheben lässt sich das mit
var i = 0; for(i = 0; i <= 10; i++){ //do something }Aber vorsicht wenn ihr mehrere for schleifen habt die innerhalb ein un der selben Javascript funktion liegen, damit ihr nicht
var i = 0; mehrmal deklariert, das führt nämlich sonst auch im FF zu Problemen :)
Hey, das geht ja etwas in die Richtung meines letzten Tipps, in dem ich auf die Verwendung einer lokalen Variable hinweise.
Du kannst übrigens eine Zeile sparen, wenn du direkt schreibst:
for(var i = 0; i < = 10; i++){//do something
}
hey danke für den tip "mit im body laden". ich habe nun seid 3 tagen nebenher immer wieder darüber gegrübelt. wie meine vorgängerin bereits erwähnt, müssen alle JS-files im body geladen werden. ist zwar müllig aber es läuft nun wenigstens bis mir mal was anderes einfällt. thx.
Pingback: Insane in the Main Frame » Blog Archive » IE7 und jQuery
Pingback: IE – das ewige Leiden | Dev-CC.com
Der Artikel ist zwar schon etwas älter, aber was solls…
Diese Probleme hatte ich mit jQuery im IE noch nie, dass muss entweder am Rest des Codes liegen oder vielleicht gab es wirklich mal Probleme bei einer älteren Version.
Man sollte jedoch aus Performance-Gründen nie einem ID-Selector einen Tag-Namen voranstellen. jQuery verwendet dann document.getElementById(), andernfalls kommt das langsame document.getElementsByTagName() zum Einsatz.
Da DOM-Operationen extrem “teuer” sind, sollte man möglichst keine Zugriffe in Schleifen tätigen und auch nicht aus Faulheit einen jQuery-Selektor mehrfach ausführen, sondern das Ergebnis zwischenspeichern.
Ebenfalls sollte man so wenig globale Variablen benutzen wie möglich. In der Regel reicht ein globales Objekt, alles weitere lässt darin erledigen.
Zusätzlich sollte man wirklich IMMER in getrennten Scopes arbeiten, das geht z.B. durch eine anonyme Funktion, dann kann das mit den globalen Variablen auch nicht unabsichtlich passieren:
var x1 = 1; // global
(function(){
var x2 = 2; // nur im Scope der anonymen Fkt., auch ohne var
x1 = 2; // globale Variablen können verändert, aber nicht gesetzt werden
});