JavaScript document.write Inline Reihenfolge der Skriptausführung

Question

Ich habe das folgende Skript, in dem die ersten und die dritten document.writeline ist statisch und die zweite erzeugt :

<script language="javascript" type="text/javascript">
document.write("<script language='javascript' type='text/javascript' src='before.js'><\/sc" + "ript>");
document.write("<script language='javascript' type='text/javascript'>alert('during');<\/sc" + "ript>");
document.write("<script language='javascript' type='text/javascript' src='after.js'><\/sc" + "ript>");
</script>

Firefox und Chrome wird angezeigt vor in und nach , während Internet Explorer zeigt zunächst während und nur ist es dann zeigen vor und nach .

Ich bin gekommen, über einen Artikel, der heißt es, dass ich nicht die erste Begegnung, aber das macht mich kaum besser fühlen.

Wer weiß, wie ich die Reihenfolge, in allen Browsern deterministisch sein einstellen kann, oder IE-Hack wie alle andere, gesunde Browser funktionieren tun?

Caveats : Der Code-Snippet ist eine sehr einfache Repro. Es wird generiert, auf dem Server und das zweite Skript ist das einzige, was sich ändert. Es ist ein langer Skript und der Grund, gibt es zwei Skripte vor und nach ihm sind, so dass der Browser sie zwischengespeichert werden und der dynamische Teil des Codes wird so klein wie möglich sein. Es kann auch mehrmals in der gleichen Seite mit unterschiedlichem generierten Code.

erscheint

Answer 1

Ich habe eine Antwort mehr nach meinem Geschmack gefunden:

<script language="javascript" type="text/javascript">
document.write("<script language='javascript' type='text/javascript' src='before.js'><\/sc" + "ript>");
document.write("<script defer language='javascript' type='text/javascript'>alert('during');<\/sc" + "ript>");
document.write("<script defer language='javascript' type='text/javascript' src='after.js'><\/sc" + "ript>");
</script>

Damit wird die Belastung beider aufzuschieben während und nach , bis die Seite fertig geladen.

Ich denke, das ist so gut wie ich bekommen kann. Wir hoffen, dass jemand der Lage, eine bessere Antwort zu geben.

Answer 2

Nein, das ist das Verhalten des Internet Explorer.

Wenn Sie Skripte dynamisch anhängen, IE, Firefox und Chrome werden alle Skripte in einer asynchronen Weise herunterladen.

Firefox und Chrome werden, bis alle von der Asynchron warten Anfragen zurückkehren und dann die Skripts in der Reihenfolge ausführen werden, dass sie in dem DOM gebunden sind, aber IE führt die Skripte in der Reihenfolge, dass sie über den Draht zurückgeführt werden.

Da die Warnung weniger Zeit in Anspruch nimmt „abrufen“ als eine externen JavaScript-Datei, die wahrscheinlich erklärt das Verhalten, das Sie sehen.

Von Krist Henriksson Post zum Thema asynchronen Skript Laden :

  

In diesem Szenario IE und Firefox   herunterladen beide Skripte aber Internet   Explorer wird auch sie in dem execute   um sie fertig ist das Herunterladen in   während Firefox herunterlädt sie   sie asynchron, aber immer noch ausführt   in der Reihenfolge sind sie in der beigefügten   DOM.

     

Im Internet Explorer bedeutet dies, Ihre   Skripte können haben Abhängigkeiten nicht auf   zueinander wie die Ausführungsreihenfolge   variiert in Abhängigkeit von Netzwerk abhängig   Verkehr, Caches, etc.

einen JavaScript-Loader. Es wird Ihnen Skript Abhängigkeiten und Reihenfolge der Ausführung angeben, während auch Ihre Skripte asynchron für die Geschwindigkeit sowie glätten einige der Browser Unterschiede zu laden.

Dies ist ein ziemlich guter Überblick über ein paar von ihnen: wesentliche JavaScript. die fünf Skript Lader

Ich habe beide RequireJS und LabJS verwendet. Meiner Meinung nach, ist LabJS etwas weniger eigenwillig.

Answer 3

Folien 25/26 von diese Präsentation sprechen über die Eigenschaften der verschiedenen Methoden für Skripte einsetzen. Er schlägt vor, dass der IE der einzige Browser ist, dass diese Skripte, um ausgeführt werden. Alle anderen Browser werden sie in der Reihenfolge ausgeführt werden, dass sie Laden beenden. Auch wird IE nicht sie, um auszuführen, wenn ein oder mehrere haben Inline-js anstelle eines src.

Eine der Methoden vorgeschlagen, ein neues DOM-Element einzufügen:

var se1 = document.createElement('script');
se1.src = 'a.js';

var se2 = document.createElement('script');
se2.src = 'b.js';

var se3 = document.createElement('script');
se3.src = 'c.js';

var head = document.getElementsByTagName('head')[0]
head.appendChild(se1);
head.appendChild(se2);
head.appendChild(se3);

Um den zweiten Abschnitt script machen erzeugen Sie einen Skript verwenden, könnten diese Inhalte zu erzeugen und die Parameter übergeben:

se2.src = 'generateScript.php?params=' + someParam;

EDIT: Trotz allem, was der Artikel, den ich so gelegen, schlägt meine Tests, dass die meisten Browser Ihre document.write-Skripte ausführen, um, wenn sie jeweils eine src haben, also, während ich das Verfahren oben denken bevorzugt wird, die Sie tun können dies auch:

<script language="javascript" type="text/javascript">
document.write("<script type='text/javascript' src='before.js'><\/sc" + "ript>");
document.write("<script type='text/javascript' src='during.php?params=" + params + "'><\/sc" + "ript>");
document.write("<script type='text/javascript' src='after.js'><\/sc" + "ript>");
</script>

Erneut bearbeiten (Reaktion auf die Kommentare zu mir selbst und andere): Sie generieren bereits das Skript auf Ihrer Seite. Was auch immer Sie tun, können auf einen anderen Server-seitiges Script bewegt werden, die den gleichen Code-Block erzeugt. Wenn Sie die Parameter auf Ihrer Seite benötigen sie dann an das Skript in dem Query-String übergeben.

Sie können aber auch diese gleiche Methode verwenden, wenn, wie Sie vorschlagen, werden Sie die Inline-Skript mehrere Male zu erzeugen:

<script language="javascript" type="text/javascript">
document.write("<script type='text/javascript' src='before.js'><\/sc" + "ript>");
document.write("<script type='text/javascript' src='during.php?params=" + params1 + "'><\/sc" + "ript>");
document.write("<script type='text/javascript' src='during.php?params=" + params2 + "'><\/sc" + "ript>");
document.write("<script type='text/javascript' src='during.php?params=" + params3 + "'><\/sc" + "ript>");
document.write("<script type='text/javascript' src='after.js'><\/sc" + "ript>");
</script>

Dies ist jedoch beginnt zu schauen, als ob Sie diese in die falsche Art und Weise nähern. Wenn Sie einen großen Block von Code mehrfach generieren, dann sollten Sie es wahrscheinlich mit einer einzigen js Funktion ersetzen und nennt es mit verschiedenen params statt ...

Answer 4

Okay ... während ...

// During.js
during[fish]();

nach ...

// After.js
alert("After");
fish++

HTML

<!-- some html -->
<script language="javascript" type="text/javascript">
document.write("<script language='javascript' type='text/javascript' src='before.js'></sc" + "ript>");
document.write("<script language='javascript' type='text/javascript'>during[" + fish + "] = function(){alert('During!' + fish);}</sc" + "ript>");
document.write("<script language='javascript' type='text/javascript' src='during.js'></sc" + "ript>");
document.write("<script language='javascript' type='text/javascript' src='after.js'></sc" + "ript>");
</script>
<!-- some other html -->
<script language="javascript" type="text/javascript">
document.write("<script language='javascript' type='text/javascript' src='before.js'></sc" + "ript>");
document.write("<script language='javascript' type='text/javascript'>during[" + fish + "] = function(){alert('During!' + fish);}</sc" + "ript>");
document.write("<script language='javascript' type='text/javascript' src='during.js'></sc" + "ript>");
document.write("<script language='javascript' type='text/javascript' src='after.js'></sc" + "ript>");
</script>

Ich bin geneigt, über die Art und Weise zu vereinbaren, dies zu riechen beginnt, though. Insbesondere warum konnte man nicht CODEGEN die „während“ in eine dynamisch js-Datei erstellt, und das einfügen?

Beachten Sie, dass das dynamisch generierte Skript geht innerhalb die Funktion in der zweiten document.write.
Getestet in FF2, IE7

Answer 5

Sie können secuential Ausführung erzwingen „onload“ (oder ähnlich) Ereignisse auf den Skripten und injizieren, um die nächste in der Event-Funktion definieren. Es ist nicht trivial, aber es gibt viele Beispiele gibt, ist hier ein.

http://www.phpied.com/javascript-include-ready- onload /

Ich denke, populäre Bibliotheken wie jQuery oder Prototyp mit dieser helfen können.

Answer 6

-Code zur Verfügung zu stellen:

<script language="javascript" type="text/javascript">
document.write("<script language='javascript' type='text/javascript'>function callGeneratedContent() { alert('during'); }<\x2Fscript>");
document.write("<script language='javascript' type='text/javascript' src='before.js'><\x2Fscript>");
document.write("<script language='javascript' type='text/javascript' src='after.js'><\x2Fscript>");
</script>

In before.js:

alert("Before");
callGeneratedContent();

In after.js:

alert("After");

Sie haben die erzeugte Zeile erste Stelle zu setzen, sonst wird FF beschweren, weil es before.js ausgeführt, bevor die Funktionsdefinition zu sehen.

Answer 7

Wie wäre das:

<script>
document.write("<script src='before.js'><\/script>");
</script>

<script >
document.write("<script>alert('during');<\/script>");
</script>

<script>
document.write("<script src='after.js'><\/script>");
</script>