2010-09-22 9 views
12

Sto usando la seguente tecnica per caricare Javascript in modo dinamico:Caricamento Javascript in modo dinamico e come verificare se lo script esiste

var script = document.createElement("script"); 
script.type = "text/javascript"; 
script.src = "file.js"; 
document.body.appendChild(script); 

E 'piuttosto un approccio comune. E 'anche discusso qui: http://www.nczonline.net/blog/2009/06/23/loading-javascript-without-blocking/

so come ricevere la notifica di una volta che il file è stato caricato ed eseguito

Quello che non so è che se il collegamento al file di origine Javascript è rotto come posso essere informato

Grazie

+0

E il tag onerror? http://stackoverflow.com/q/538745/1211174 – oak

risposta

19

L'ascolto di eventi su elementi di script non è considerato affidabile (Source). Un'opzione che ti viene in mente è quella di utilizzare setTimeout() per eseguire il polling di una variabile che ti aspetti di definire nel tuo script esterno. Dopo x secondi, potresti interrompere il sondaggio e considerare lo script come non funzionante.

script esterno: file.js:

var MyLibrary = { }; 

documento principale:

var poll; 
var timeout = 100; // 10 seconds timeout 
var script = document.createElement('script'); 
script.type = 'text/javascript'; 
script.src = 'file.js'; 
document.body.appendChild(script); 

poll = function() { 
    setTimeout(function() { 
    timeout--; 
    if (typeof MyLibrary !== 'undefined') { 
     // External file loaded 
    } 
    else if (timeout > 0) { 
     poll(); 
    } 
    else { 
     // External library failed to load 
    } 
    }, 100); 
}; 

poll(); 
+1

Mi piace la tua soluzione. – Lx1

+0

Vorrei che ce ne fosse uno migliore. Potrei pensare di decidere di timeout solo un millisecondo prima che la risposta ritorni se mi occupo di un server lento. – Lx1

+0

@ Lx1: Sì, è possibile ridurre il timeout di setTimeout a 10 o 20 millisecondi. Se ricordo correttamente 10 è il timeout minimo per la maggior parte dei browser. –

0

Un modo potrebbe essere quello di definire una variabile nello script di includere e quindi verificare se questa variabile è definita, oppure no.

+0

Il problema è ... Quando verifichi la variabile? Il '

0

Nell'evento onload, ci sono i codici di stato. 200 è buono, 404 come puoi ricordare significa che un file non è stato trovato. Utile?

1
var script = document.createElement("script"); 
script.type = "text/javascript"; 
script.src = "file.js"; 

È necessario aggiungere un callback per questo script.

1 °: Creare la chiamata:

function callbackFn(callbackArgs) = { 
     console.log("script is loaded with the arguments below"); 
     console.log(callbackArgs); 
    } 

2 °: Aggiungi un listener di eventi allo script. Sia evento onload supporto Firefox e Chrome in modo da poter usare in questo modo:

script.onload = callbackFn(); 

Per IE ... È possibile aggiungere un listener di eventi per un cambiamento di stato come questo:

script.onreadystatechange = function() { 
    if (this.readyState != "loaded") return; 
    callbackFn(); 
    } 

Ultimo: Aggiungi lo script al corpo come facevi di solito.

document.body.appendChild(script); 

Per ulteriori informazioni, fare riferimento a this acticle.

0

Caricamento uno script in modo dinamico è molto più semplice:

var script = document.createElement('script'); 
script.onload = function() { 
    main_function(); // Main function to call or anything else or nothing 
}; 
script.src = "yourscript.js"; 
document.head.appendChild(script);  
0

È possibile aggiungere un attributo onload e in questo attributo, è possibile chiamare una funzione che verrà eseguito dopo che il file JS è stato caricato.

Controllare il codice:

var jsElement = document.createElement("script"); 
jsElement.type = "application/javascript"; 
jsElement.src = "http://code.jquery.com/jquery-latest.min.js"; 
jsElement.setAttribute("onload","getMeAll()"); 
document.body.appendChild(jsElement); 
function getMeAll(){ 
    //your code goes here 
} 

Spero che questo aiuti.

Problemi correlati