Jan 31

Internet Explorer, MooTools und Elemente

Programmierung Kommentieren

Am Freitag hatte ich noch ein JavaScript-Problem, das ich leider nicht mehr lösen konnte. Das Problem trat im Zusammenspiel der Multibox (einer Lightbox für verschiedene Inhalte auf MooTools-Basis) mit einem per AJAX geladenen Link auf. Multibox erweitert alle Links mit einer bestimmten CSS-Klasse durch ein onClick-Event, das ein Overlay über die Seite legt, in dem der verlinkte Inhalt angezeigt wird. Dies ist eigentlich auch eine ganz smarte Lösung, denn so erhalten Nutzer, die kein JavaScript (aktiviert) haben, den Inhalt als normalen Link. Allerdings wird mein Link zum Inhalt dynamisch per AJAX geladen. Daher hat das Multibox-Skript gar keine Chance, diesen Link onDOMReady zu kennen.

Mein Lösungsansatz war, einfach in der Verarbeitung des AJAX-Ergebnisses per JavaScript ein neues a-Element zu erstellen und in dem ohnehin schon auf der Seite vorhandenen Multibox-Element hinzuzufügen. Der Ansatz funktioniert auch tadellos im Firefox - leider nicht im Internet Explorer (Object doesn’t support this property or method).

Wenigstens wusste ich schon, an welcher Stelle der Fehler lag. Daher konnte ich das Problem (vereinfacht) nachstellen und heute auch aufspüren: Die von MooTools bereitgestellten Methoden setProperty und getProperty funktionieren im Internet Explorer nur bei Elementen, die bereits im ursprünglich an den Browser ausgelieferten HTML vorhanden sind, nicht bei nachträglich hinzugefügten Elementen.

Nehmen wir folgende (einfache) HTML-Seite:

  1. <html>
  2.  <head>
  3.   <title>Test-Script</title>
  4.   <script type="text/javascript" src="js/mootools.v1.1.js"></script>
  5.  </head>
  6.  <body>
  7.   <div id="inDOM" style="border:4px solid #004000; background: #80FF00; width: 600px;">This is just a Test-DIV with the ID <em>inDOM</em></div>
  8.   <a href="#" onclick="doTest();">Test Me</a><br />
  9.  </body>
  10. </html>


Klickt man auf den Link TestMe, wird die JavaScript-Funktion doTest ausgeführt. Folgender Code funktioniert sowohl im Internet Explorer als auch im Firefox:

  1. function doTest() {
  2.  var a = $('inDOM');
  3.  alert(a.getProperty('id'));
  4. }

Wie zu erwarten wird ein Meldungsfenster mit “inDOM” ausgegeben. Auch folgender Code wird von beiden Browsern interpretiert:

  1. function doTest() {
  2.  var a = $('inDOM');
  3.  alert(a.getProperty('id'));
  4.  
  5.  a.setProperty("id", "changedByJS");
  6.  alert(a.getProperty('id'));
  7. }

Zunächst wird “inDOM” ausgegeben, danach wird mittels setProperty ein neuer Wert für id gesetzt - und vollkommen korrekt “changedByJS” ausgegeben.

Auch ein neues Element mittels JavaScript zu erstellen klappt einwandfrei:

  1. function doTest() {
  2.  var a = $('inDOM');
  3.  alert(a.getProperty('id'));
  4.  
  5.  a.setProperty("id", "changedByJS");
  6.  alert(a.getProperty('id'));
  7.  
  8.  var b = document.createElement("div");
  9. }

Der Internet Explorer bricht erst, wenn man versucht, diesem neu erstellten DIV mittels setProperty eine id zuzuweisen:

  1. function doTest() {
  2.  var a = $('inDOM');
  3.  alert(a.getProperty('id'));
  4.  
  5.  a.setProperty("id", "changedByJS");
  6.  alert(a.getProperty('id'));
  7.  
  8.  var b = document.createElement("div");
  9.  
  10.  b.setProperty("id", "createdByJS");
  11. }

Es bringt auch nichts, das mittels document.createElement erzeugte DIV dem DOM hinzuzufügen: Weder a.appendChild(b) noch document.body.appendChild(b) helfen. Fügt man jedoch das Element “hart” mittels innerHTML hinzu, klappt’s auch mit dem IE:

  1. function doTest() {
  2.  var a = $('inDOM');
  3.  alert(a.getProperty('id'));
  4.  
  5.  a.setProperty("id", "changedByJS");
  6.  alert(a.getProperty('id'));
  7.  
  8.  a.innerHTML += '<div id="innerHTML">DIV innerHTML</div>';
  9.  b = $('innerHTML');
  10.  
  11.  b.setProperty("id", "createdByJS");
  12.  alert(b.getProperty('id'));
  13. }

Hier wird das Meldungsfenster “createdByJS” ausgegeben. Das ist aber nicht die Lösung, die ich möchte - immerhin brauche ich das Element nur, um das Multibox-Objekt damit zu füttern und möchte es nicht irgendwo auf der Seite einfügen.

Ich denke aber, an der Stelle kann man auch auf setProperty und getProperty verzichten und direkt mit der id-Eigenschaft arbeiten:

  1. function doTest() {
  2.  var a = $('inDOM');
  3.  alert(a.getProperty('id'));
  4.  
  5.  a.setProperty("id", "changedByJS");
  6.  alert(a.getProperty('id'));
  7.  
  8.  var b = document.createElement("div");
  9.  
  10.  b.id = "createdByJS";
  11.  alert(b.id);
  12. }

So klappt es dann sowohl im Internet Explorer als auch im Firefox. Jetzt hoffe ich nur, dass mir Opera keinen Strich durch die Rechnung macht ;)

Ein Kommentar zu “Internet Explorer, MooTools und Elemente”

  1. Inkvine schreibt:
    21. April 2009 um 16:16

    Mit solchen Problemen habe ich mich vor 2 Jahren auch rumgeschlagen. Mir ging diese Browser-Abhängigkeit so auf den Geist, dass ich zu Adobe Flex gewechselt und damit sehr glücklich bin. Ein Blick lohnt sich. Mittlerweile entwickel ich damit schon 1,5 Jahre und vermisse egtl absolut garnichts.

Hinterlasse eine Antwort