{"id":3,"date":"2007-12-30T22:32:55","date_gmt":"2007-12-30T21:32:55","guid":{"rendered":"http:\/\/schmidt-welt.net\/weblog\/?p=3"},"modified":"2008-01-03T22:41:41","modified_gmt":"2008-01-03T21:41:41","slug":"ie7-bevorzugt-javascript-dateien-vor-javascript-code-in-der-html-seite","status":"publish","type":"post","link":"https:\/\/www.schmidt-welt.net\/weblog\/ie7-bevorzugt-javascript-dateien-vor-javascript-code-in-der-html-seite\/","title":{"rendered":"IE7 bevorzugt JavaScript-Dateien vor Inline-JavaScript"},"content":{"rendered":"<p>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. <\/p>\n<p> <strong>data1.js<\/strong><br \/>\n <code>var data = \"data1 to load\";<\/code><\/p>\n<p> <strong> data2.js<\/strong><br \/>\n <code>var data = \"data2 to load\";<\/code><\/p>\n<p>Damit die Daten der zweiten Datei die Daten der ersten nicht \u00c3\u00bcberschreiben, 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<\/p>\n<p> <strong>main.js<\/strong><br \/>\n <code>var allData = [];<\/p>\n<p> function importData(){<br \/>\n    out=\"\";<br \/>\n    [\"data1\",\"data2\"].each(function(d){<br \/>\n        out+=\"<script type=\\\"text\/javascript\\\" src=\\\"\"+d+\".js\\\"><\/script>\";<br \/>\n        out+=\"<script type=\\\"text\/javascript\\\">allData.push(data);<\/script>\";<br \/>\n    });<br \/>\n    document.write(out);<br \/>\n }<\/p>\n<p> function output(){<br \/>\n    $(\"output\").innerHTML = allData;<br \/>\n }<br \/>\n<\/code><\/p>\n<p>Der vollst\u00c3\u00a4ndigkeit halber hier noch der HTML-Code:<\/p>\n<p><strong>index.htm<\/strong><br \/>\n<code><br \/>\n...<br \/>\n       script type=\"text\/javascript\" src=\"main.js\"><\/script><br \/>\n       script type=\"text\/javascript\">importData();<\/script><br \/>\n...<br \/>\n\tbody onload=\"output();\"<br \/>\n...<br \/>\n<\/code><\/p>\n<p>F\u00c3\u00bchrt man obigen Code aus, erkennt man im Ablauf von IE 7 und FF einen Unterschied. <\/p>\n<p><strong>FF<\/strong>: Es wird zun\u00c3\u00a4chst der Inhelt der data1.js importiert. Anschlie\u00c3\u0178end wird das data-Objekt zum Array hinzugef\u00c3\u00bcgt. 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.<\/p>\n<p><strong>IE7<\/strong>: Der IE7 scheint das nicht so zu machen. Er liest als erstes die Daten in der ersten Datei ein. Anschlie\u00c3\u0178end werden die Daten der zweiten Datei eingelesen. Am Ende wird erst der Javascript-Code in der HTML-Datei ausgef\u00c3\u00bchrt. Das Problem ist hier, dass die Daten nicht korrekt im Array abgelegt werden.<\/p>\n<p><strong>L\u00c3\u00b6sung<\/strong>: Das Problem l\u00c3\u00a4\u00c3\u0178t sich l\u00c3\u00b6sen, indem man die Javascript-Zeile <code>  out+=\"<script type=\\\"text\/javascript\\\">allData.push(data);<\/script>\";       <\/code> in <code>  out+=\"<script type=\\\"text\/javascript\\\">sammleDaten.js<\/script>\"; <\/code> ge\u00c3\u00a4ndert wird. Wir lagern also <code>allData.push(data);<\/code> in eine eigene Datei aus. Dann funktioniert es auch mit dem IE7. Nach dem Ausf\u00c3\u00bchren der ersten Daten-Datei wird das sammelDaten-Script ausgef\u00c3\u00bchrt, das die Daten der ersten Datei in das Array sichert. Im anschlu\u00c3\u0178 wird data2 geladen und dann wieder ins Array gepackt.<\/p>\n<p>Diese L\u00c3\u00b6sung funktioniert in beiden Browser. <\/p>\n<p>Fazit: IE7 schein die JS-Dateien bevorzugt zu laden und auszuf\u00c3\u00bchren.<\/p>\n<p><a href='http:\/\/schmidt-welt.net\/weblog\/uploads\/2007_12_30\/importtest.zip' title='Alle Sourcen'>Alle Sourcen<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 = &#8220;data1 to load&#8221;; data2.js var data = &#8220;data2 to load&#8221;; Damit die Daten der zweiten Datei die Daten der ersten nicht \u00c3\u00bcberschreiben, sollen nach dem Laden [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-3","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.schmidt-welt.net\/weblog\/wp-json\/wp\/v2\/posts\/3","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.schmidt-welt.net\/weblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.schmidt-welt.net\/weblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.schmidt-welt.net\/weblog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.schmidt-welt.net\/weblog\/wp-json\/wp\/v2\/comments?post=3"}],"version-history":[{"count":0,"href":"https:\/\/www.schmidt-welt.net\/weblog\/wp-json\/wp\/v2\/posts\/3\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.schmidt-welt.net\/weblog\/wp-json\/wp\/v2\/media?parent=3"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.schmidt-welt.net\/weblog\/wp-json\/wp\/v2\/categories?post=3"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.schmidt-welt.net\/weblog\/wp-json\/wp\/v2\/tags?post=3"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}