¿Cómo carga dinámicamente un archivo de JavaScript desde un dominio diferente?

Question

Me parece excelente código, publicado por aemkei como respuestas a esta pregunta:

1. How do you dynamically load a javascript file? (Think C’s #include)
2. Use javascript to inject script references as needed?

puede escribir dinámica etiquetas script (usando Prototipo):

new Element("script", {src: "myBigCodeLibrary.js", type: "text/javascript"}); 

El problema aquí es que no sabemos cuando el archivo de script externo está completamente cargado.

muchas veces queremos nuestro código dependiente de la siguiente línea y el gusto de escribir algo como:

if (iNeedSomeMore){ 
    Script.load("myBigCodeLibrary.js"); // includes code for myFancyMethod(); 
    myFancyMethod();      // cool, no need for callbacks! 
} 

Hay una manera inteligente para inyectar secuencias de comandos dependencias sin la necesidad de devoluciones de llamada. Simplemente tiene que extraer el script a través de una solicitud síncrona de AJAX y evaluar el script a nivel global.

Si utiliza el método del prototipo Script.load se parece a esto:

var Script = { 
    _loadedScripts: [], 
    include: function(script){ 
    // include script only once 
    if (this._loadedScripts.include(script)){ 
     return false; 
    } 
    // request file synchronous 
    var code = new Ajax.Request(script, { 
     asynchronous: false, method: "GET", 
     evalJS: false, evalJSON: false 
    }).transport.responseText; 
    // eval code on global level 
    if (Prototype.Browser.IE) { 
     window.execScript(code); 
    } else if (Prototype.Browser.WebKit){ 
     $$("head").first().insert(Object.extend(
     new Element("script", {type: "text/javascript"}), {text: code} 
    )); 
    } else { 
     window.eval(code); 
    } 
    // remember included script 
    this._loadedScripts.push(script); 
    } 
}; 

me encontré con que, el código no funciona en IE si el evento de todos ellos se ejecuta en 'file:// 'protocolo, sin embargo, no es el problema ya que su caso de uso involucraba una aplicación web real.

Lo intenté una vez para incluir http://www.google-analytics.com/urchin.js por google, pero desde una página web, pero parece que no puede solicitar el archivo javascript desde un dominio diferente.

¿Cómo podemos agregar javascript dinámicamente, al igual que lo que hace arriba de los scripts, pero desde otro dominio?

Answer 1

El modelo de seguridad en los navegadores modernos evita que JavaScript realice solicitudes entre dominios. Eso tiene agujeros (ver todos los sitios web explotados desde el comienzo de Internet), pero usarlos es más que un poco confuso y solo es cuestión de tiempo antes de que se remenchen.

Answer 2

Lo que Rex dijo es correcto, aunque HTML5 ha agregado mensajes de dominio cruzado y xhr, que requieren un poco de trabajo de su parte, pero deberían ser utilizables para lograrlo. Desgraciadamente, todavía no están presentes en todos los navegadores lanzados (creo que las últimas versiones de Safari, Firefox e IE tienen soporte para algunas de estas características, pero no estoy seguro de qué navegadores admiten qué apis)

Answer 3

Puedes utilice el evento onload y onreadystatechange para comprender cuándo se carga la etiqueta <script>.

var script = new Element("script", {src: "myBigCodeLibrary.js", type: "text/javascript"}); 

script.onload = script.onreadystatechange = function(){ 
    if (!this.readyState || 
     this.readyState == "loaded" || this.readyState == "complete") { 
     //script is loaded 
    } 
};