Caricamento dinamico degli script

Question

Sto caricando alcuni script YUI dinamicamente nel mio codice in risposta a una richiesta Ajax. Il DOM e la pagina sono completamente caricati quando viene effettuata la richiesta: è una risposta per un evento utente.

Aggiungo il tag alla testa, da bambini. Ma mi sono imbattuto in alcuni problemi:

Aggiungo due script YUI ospitati su Yahoo! CDN e uno script in linea del mio responsabile per la creazione di oggetti, l'aggiunta di listener di eventi e il rendering dei widget YUI. Ma io quando il mio script esegue gli script YUI non sono ancora stati caricati e mi danno errori e non funzionano come mi aspetto.

C'è un modo per eseguire il mio script (o definire una funzione da eseguire) quando gli script YUI sono completamente caricati?

Answer 1

È possibile utilizzare un setTimeout() per eseguire una certa funzione che solo controlla se è caricato - controllare qualcosa come

if (typeof YUI_NAMESPACED_THING !== "undefined") runCode()

EDIT Grazie, CMS

Answer 2

Hai provato un evento onload?

Modificato: (grazie Jamie)

var script = document.createElement("script"); 
script.type = "text/javascript"; 
script.src = src; 
//IE: 
if(window.attachEvent && document.all) { 
    script.onreadystatechange = function() { 
     if(this.readyState === "complete") { 
      callback_function(); //execute 
     } 
    }; 
} 
//other browsers: 
else { 
    script.onload = callback_function; //execute 
} 
document.getElementsByTagName("head")[0].appendChild(script); 

Answer 3

Se stai usando YUI 2.x Mi consiglia di utilizzare l'utilità YUI Get, come è stato studiato per gestire questo tipo di problema.

Answer 4

Se si caricano più file di script singoli da Yahoo! CDN, è necessario assicurarsi che entrambi siano caricati prima di eseguire il codice dipendente. Puoi evitarlo usando il gestore combo. Vedi il Configuratore per ottenere quello che dovrebbe essere l'url dello script per caricare entrambi/tutti i file YUI necessari da un url.

http://developer.yahoo.com/yui/articles/hosting/

Con questo in mente, assumendo è necessario caricare i file in modo asincrono YUI, è necessario utilizzare un/gestore onreadystatechange onload come notato da digitalFresh.

mi sento di raccomandare il seguente schema, però:

(function (d) { 
    var s = d.createElement('script'), 
     onEvent = ('onreadystatechange' in s) ? 'onreadystatechange' : 'onload'; 

    s[onEvent] = function() { 
     if (("loaded,complete").indexOf(this.readyState || "loaded") > -1) { 
      s[onEvent] = null; 

      // Call your code here 
      YAHOO.util.Dom.get('x').innerHTML = "Loaded"; 
     } 
    }; 

    // Set the src to the combo script url, e.g. 
    s.src = "http://yui.yahooapis.com/combo?2.8.1/..."; 

    d.getElementsByTagName('head')[0].appendChild(s); 
})(document); 

Answer 5

Se ho capito bene, la risposta Ajax con questo:

<script href="yui-combo?1"></script> 
<script href="yui-combo?2"></script> 
<p>some text here</a> 
<script> 
// using some of the components included in the previous combos 
// YAHOO.whatever here... 
</script> 

Se questo è il caso, questo è un chiaro caso in cui è necessario utilizzare il plug-in del dispatcher. Il Dispatcher emula il processo di caricamento del browser per le risposte AJAX. Fondamentalmente caricherà ed eseguirà ogni script nell'ordine esatto.

migliori saluti, Caridy