JavaScript documento.scrivere Script Inline Ordine di Esecuzione

Question

Ho il seguente script, dove il primo e il terzo document.writeline sono statici e il secondo è generato:

<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 e Chrome display prima, durante e dopo, mentre Internet Explorer prima mostra durante e solo allora non si mostrano prima e dopo.

Ho incontrato un articolo che afferma che io non sono il primo a incontrare questo, ma che non mi fa sentire meglio.

Qualcuno sa come posso impostare l'ordine di essere deterministica in tutti i browser, o hack IE a lavorare come tutti gli altri, sane browser?

Avvertenze:Il frammento di codice è molto semplice riproduzione.Si è generato sul server e il secondo script è l'unica cosa che cambia.E ' una lunga script e il motivo ci sono due script prima e dopo di esso sono in modo che il browser memorizza nella cache di loro e la parte dinamica del codice di volontà essere il più piccolo possibile.Può, inoltre, appare più volte nella stessa pagina con diverso codice generato.

Answer 1

Ho trovato una risposta di più di mio gradimento:

<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>

Questo permetterà di posticipare il caricamento di entrambi durante e dopo fino a quando la pagina ha terminato il caricamento.

Penso che questo è buono come posso ottenere.Speriamo che qualcuno sarà in grado di dare una risposta migliore.

Answer 2

No, questo è il comportamento di Internet Explorer.

Se si allegare script in modo dinamico, IE, Firefox, e Chrome tutto scaricare lo script in modo asincrono.

Firefox e Chrome attendere fino a che tutti i async richieste di ritorno e quindi eseguire gli script nell'ordine in cui essi sono collegati, nel DOM, ma in internet explorer viene eseguito lo script in modo che essi sono tornati sopra il filo.

Dal momento che l'avviso richiede meno tempo per "recuperare" rispetto ad un file esterno, javascript, che probabilmente spiega il comportamento che si sta vedendo.

Da Kristoffer Henriksson s post sull'argomento asincrona di script di caricamento:

In questo scenario IE e Firefox scaricare entrambi gli script, ma in Internet Explorer è anche eseguire in ordine di terminare il download in mentre Firefox download in modo asincrono, ma ancora li esegue nell'ordine in cui essi sono collegati in DOM.

In Internet Explorer, questo significa che il tuo gli script non hanno dependancies su l'un l'altro come l'ordine di esecuzione variano a seconda rete il traffico, cache, etc.

Considerare l'utilizzo di un Javascript loader.Permette di specificare le dipendenze degli script e ordine di esecuzione, mentre il caricamento di script in modo asincrono per la velocità che per appianare alcune delle differenze tra i browser.

Questa è una bella panoramica di alcuni di loro: Essenziale JavaScript:i primi cinque caricatori di script.

Ho usato entrambi i RequireJS e LabJS.A mio parere, LabJS è un po ' meno supponente.

Answer 3

Diapositive di 25/26 questa presentazione parlare delle caratteristiche dei diversi metodi per l'inserimento di script.Si suggerisce che IE è l'unico browser che prevede l'esecuzione di tali script in ordine.Tutti gli altri browser verrà eseguito nell'ordine che hanno terminato il caricamento.Anche IE non li esegue in ordine, se uno o più di inline js invece di un src.

Uno dei metodi suggeriti per inserire un nuovo elemento DOM:

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);

Per fare la seconda sezione dello script generato si potrebbe usare uno script per generare il contenuto e passare i parametri:

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

EDIT:A dispetto di ciò che l'articolo che ho situata dice, il mio test suggerisce che la maggior parte dei browser di eseguire il vostro documento.scrivere script in ordine, se ognuno di essi ha un src, così, mentre penso che il metodo di cui sopra è preferito, si potrebbe fare questo:

<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>

EDIT di NUOVO (risposta ai commenti per me e gli altri):Si sta già generando lo script nella pagina.Qualunque cosa si sta facendo può essere spostata su un altro server-side script che genera lo stesso blocco di codice.Se avete bisogno di parametri sulla tua pagina poi passare allo script nella stringa di query.

Inoltre, è possibile utilizzare questo stesso metodo, se, come lei suggerisce, si genera lo script inline più volte:

<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>

Tuttavia, questo sta cominciando a guardare come se ci si avvicina nel modo sbagliato.Se si sta generando un grande blocco di codice più volte, allora si dovrebbe probabilmente essere la sua sostituzione con una singola funzione js e chiamando con diversi parametri invece...

Answer 4

Va bene...durante...

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

dopo...

// 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>

Io sono propenso a concordare circa il modo in cui questo sta cominciando odore, però.In particolare, perché non si codegen il "durante" in un creato in modo dinamico, js file, e inserire?

Nota che il generato dinamicamente script va all'interno la funzione in secondo documento.scrivere.
Testato in FF2, IE7

Answer 5

È possibile forzare secuential esecuzione definendo "onload" (o simile) eventi di script e iniettare il prossimo in funzione di evento.Non è banale, ma ci sono un sacco di esempi là fuori, qui è uno.

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

Penso popolare librerie come jQuery o prototype può aiutare con questo.

Answer 6

Codice di fornire:

<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");

Devi mettere generato prima linea, altrimenti FF si lamentano perché si esegue before.js prima di vedere la definizione di funzione.

Answer 7

Che ne dite:

<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>