Categories
Javascript

IE7 bevorzugt JavaScript-Dateien vor Inline-JavaScript

In eine HTML-Datei sollen Daten-Dateien per Javascript importiert werden. Es handelt sich um mehrere Dateien die den gleichen Syntax aufweisen um die Daten zu definieren.

data1.js
var data = "data1 to load";

data2.js
var data = "data2 to load";

Damit die Daten der zweiten Datei die Daten der ersten nicht überschreiben, sollen nach dem Laden der data1.js die Daten in ein Array allData gesichert werden. Dieses Array ist neben weiteren js-funktionen in eine js-Datei ausgelagert

main.js
var allData = [];

function importData(){
out="";
["data1","data2"].each(function(d){
out+="";
out+="";
});
document.write(out);
}

function output(){
$("output").innerHTML = allData;
}

Der vollständigkeit halber hier noch der HTML-Code:

index.htm

...
script type="text/javascript" src="main.js">
script type="text/javascript">importData();
...
body onload="output();"
...

Führt man obigen Code aus, erkennt man im Ablauf von IE 7 und FF einen Unterschied.

FF: Es wird zunächst der Inhelt der data1.js importiert. Anschließend wird das data-Objekt zum Array hinzugefügt. Dann wird die zweite Datei geladen und das zweite Objet zum Array gepackt. Am Ende wird die onLoad Methode aufgerufen un der Inhalt des Arrays wird mit den Daten beider Dateien korrekt ausgegeben.

IE7: Der IE7 scheint das nicht so zu machen. Er liest als erstes die Daten in der ersten Datei ein. Anschließend werden die Daten der zweiten Datei eingelesen. Am Ende wird erst der Javascript-Code in der HTML-Datei ausgeführt. Das Problem ist hier, dass die Daten nicht korrekt im Array abgelegt werden.

Lösung: Das Problem läßt sich lösen, indem man die Javascript-Zeile out+=""; in out+=""; geändert wird. Wir lagern also allData.push(data); in eine eigene Datei aus. Dann funktioniert es auch mit dem IE7. Nach dem Ausführen der ersten Daten-Datei wird das sammelDaten-Script ausgeführt, das die Daten der ersten Datei in das Array sichert. Im anschluß wird data2 geladen und dann wieder ins Array gepackt.

Diese Lösung funktioniert in beiden Browser.

Fazit: IE7 schein die JS-Dateien bevorzugt zu laden und auszuführen.

Alle Sourcen