2011-05-05 31 views
15

¿Cómo carga un archivo JavaScript desde otro archivo JavaScript, como CSS? En CSS utilizamos escribir @import url("mycss.css");.¿Cómo cargar un archivo JavaScript de otro?

¿Hay alguna manera de hacerlo en JavaScript?

+0

Posible duplicado de [¿Incluir un archivo JavaScript en otro archivo JavaScript?] (Http://stackoverflow.com/questions/950087/ include-a-javascript-file-in-another-javascript-file) – Vadzim

Respuesta

27

Sí. Si lo que quieres es JavaScript puro, debes crear dinámicamente una etiqueta script y anexarla al documento.

Sí. Si usa la biblioteca jQuery, puede usar el método $.getScript.

$.getScript("another_script.js"); 
32

No hay @ función/método de importación-ish en Javascript, pero se puede simplemente añadir una secuencia de comandos para la etiqueta <head> así:

var newScript = document.createElement('script'); 
newScript.type = 'text/javascript'; 
newScript.src = '/path/to/js/file'; 
document.getElementsByTagName('head')[0].appendChild(newScript); 

O como Edgar mencionado justo antes de mí no pueden utilizar jQuery.

+0

¿Carga esto el archivo e inicia todos los contenidos escritos en él? –

+0

porque estoy esperando escribir este código para cargar jQuery –

+0

@RajaAnbazhagan sí iniciará el contenido del archivo, de hecho lo he usado para cargar jQuery, así que sé que funciona. – musicinmyhead

3

Javascript en sí mismo no proporciona ninguna ayuda con la modularización que no sea la capacidad de eval una cadena. Pero esta es una necesidad bastante común que la mayoría de los grandes frameworks javascript han creado sus propias soluciones, y más recientemente, se ha hecho un esfuerzo para estandarizar esas API en el proyecto requirejs. Si está utilizando un framework como Dojo o jQuery, probablemente sea mejor que aprenda a usar sus instalaciones, pero si no, requirejs es una herramienta independiente liviana. Es, básicamente, sólo tiene que añadir

<script data-main="scripts/main" src="scripts/require.js"></script> 

a su sección <head>, y luego poner su propio javascript dentro de algún código de contenedor como este (robado del sitio require.js):

require(["helper/util"], function() { 
    //This function is called when scripts/helper/util.js is loaded. 

    require.ready(function() { 
     //This function is called when the page is loaded 
     //(the DOMContentLoaded event) and when all required 
     //scripts are loaded. 

    }); 
}); 
16

El hecho de que nadie ha mencionado aún, hay otra opción, que no requiere ninguna biblioteca sofisticada o codificación complicada, document.write. En principio, se vería como este, a pesar de ver más abajo para una advertencia:

document.write('<script src="myscript.js" type="text/javascript"></script>'); 

Este será ejecutado en analizar por completo la etiqueta script, y si usted pone su etiqueta de script en la cabeza, la nueva etiqueta guión también estar en la cabeza, justo después de la que se está ejecutando. . Tenga cuidado para ejecutarlo directamente en lugar de cuando se ha cargado el documento (como en una devolución de llamada $(function(){}) Esto es lo que yo uso:.

(function(){ 
    function load(script) { 
    document.write('<'+'script src="'+script+'" type="text/javascript"><' + '/script>'); 
    } 

    load("script1.js"); 
    load("script2.js"); 
    load("etc.js"); 
})(); 

La función de cerramiento está ahí sólo para no contaminar el espacio de nombres global

La advertencia (y por qué el 'guión' que se divide arriba) es que no puede haber etiquetas de guiones finales dentro de una etiqueta de guión, el analizador HTML no sabe que es parte del guión. Hay un other question sobre ese tema.

Cuestiones relacionadas