Muchas personas pueden haber encontrado el problema de cargar otros archivos JS en JavaScript, pero muchos amigos pueden no saber cómo juzgar si el archivo JS que queremos cargar se ha cargado. Si no completamos la carga, no tendremos éxito. Este artículo explica cómo cargar otros archivos JS en JS y ejecutar funciones de devolución de llamada después de la carga.
Podemos crear un elemento <script> dinámicamente y luego cargar el script cambiando su atributo SRC, pero ¿cómo sabemos que el archivo de script se ha cargado? Porque algunas de nuestras funciones deben ejecutarse después de que el script se cargue y surta efecto.
Después de buscar recursos en la red, descubrí que en el navegador IE, puede usar el OnreadyStateChange del elemento <script> para monitorear el cambio en el estado de carga y determinar si el script se carga o completarse juzgando si su estado Ready está cargado o completado. En lugar de los navegadores IE, puede usar Onload para determinar directamente si el script está cargado.
Un proceso de implementación simple se ve así:
// es decir: var script = document.createElement ("script"); script.setattribute ("type", "text/javaScript"); script.onreadyStateChange = function () {if (this.readyState == "cargado" || this.readyState == "completo") {alerta ("cargado con éxito!");; }} script.setattribute ("src", scripts [i]); // ópera, ff, chrome, etc.: var script = document.createElement ("script"); script.setTribute ("type", "text/javaScript"); script.onload = function () {alerta ("cargado exitoso!");} script.setTrute ("scripts [) {alerta)!El principio es muy simple. Según estos dos principios simples, hicimos algunas modificaciones, y lo cambié a dos funciones, a saber, la carga en serie y los scripts de carga paralela.
Al pasar una matriz que contiene múltiples rutas de archivo JS, la función de carga en serie comienza desde la primera carga del archivo de script. Cada vez que se cargue correctamente, se cargará el siguiente archivo de script. Después de que se complete la carga, se ejecutará la función de devolución de llamada. La carga paralela es cargar todos los archivos de script desde el principio, es decir, comienzan desde el mismo punto, y cuando se completa toda la carga, se ejecuta la función de devolución de llamada.
Después de las pruebas, estas dos funciones son compatibles con todos los navegadores principales actuales.
/*** CONCATENATE Carga del script especificado* Concatenate Carging [AsynChronous] Cargando uno por uno, cada carga se completa, la siguiente está cargada* Después de que se completa toda la carga, la devolución de llamada se ejecuta* @param Array | Cadena Scripts Scripts* @Param Función La función llamada Atrás después de éxito* @ @Curn Array All Genered Element Archin if (typeof (scripts)! = "objeto") var scripts = [scripts]; var head = document.getElementsBytagName ("Head"). item (0) || document.documentelement; var s = new Array (), Last = scripts.length - 1, recursiveload = function (i) {// recursives s [i] = document.createElement ("script"); s [i] .SetAttribute ("Tipo", "Text/JavaScript"); s [i] .onload = s [i] .onreadyStateChange = function () {// Adjunte manejadores para todos los navegadores if (!/*@cc_on!@*/0 || this.readyState == "cargado" || this.readyState == "completo") {this.onload = this.onreadyStateChange = null; this.parentnode.removechild (this); if (i! = Last) recursiveload (i + 1); else if (typeof (llamado) == "función") llamado (); }} s [i] .SetAttribute ("src", scripts [i]); Head.appendChild (s [i]); }; recursiveOad (0);} /*** Cargue el script especificado en paralelo* cargar en paralelo [synchronous] al mismo tiempo, independientemente de si la carga anterior se completa o no, cargue todos directamente* Ejecutar la devolución de devolución de la llamada después de que se complete toda la carga* /matriz @param ParallLoadScripts (scripts, llamado) {if (typeOf (scripts)! = "objeto") var scripts = [scripts]; var head = document.getElementsBytagName ("Head"). item (0) || document.DocumentElement, s = new Array (), cargado = 0; for (var i = 0; i <scripts.length; i ++) {s [i] = document.createElement ("script"); s [i] .SetAttribute ("Tipo", "Text/JavaScript"); s [i] .onload = s [i] .onreadyStateChange = function () {// Adjunte manejadores para todos los navegadores if (!/*@cc_on!@*/0 || this.readyState == "cargado" || this.readyState == "completo") {cargado ++; this.onreadyStateChange = null; this.parentnode.removechild (this); if (loaded == scripts.length && typeOf (llamado) == "function") callback (); }}; s [i] .SetAttribute ("src", scripts [i]); Head.appendChild (s [i]); }}Aquí, la etiqueta <script> se inserta dinámicamente en la etiqueta <Art> en la página, y el elemento de la etiqueta se eliminará automáticamente después de la carga.
Si tiene cuidado, también encontrará que un método llamado compilación condicional se usa aquí como una expresión (!/*@Cc_on!@*/0) para determinar si no es un navegador IE. La compilación condicional no es el foco de este artículo. Si está interesado, puede buscar materiales relevantes para el aprendizaje.
Cómo usar estas dos funciones: aquí declaramos una variable de matriz que contiene dos direcciones de archivos JS remotos (por supuesto, el script de llamada <script> de etiqueta es compatible con el dominio cruzado):
Var scripts = ["http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js.js", "http://wellstyled.com/files/jquery.debug/jquery.debug.js"font>//these dos archivos son los archivos de la biblioteca de los archivos de la biblioteca de los archivos de la biblioteca de Jquery. y el complemento de depuración jQuery // luego puede usar el siguiente método para llamar y ejecutar la devolución de llamada después del éxito. SeriesLoadScripts (scripts, function () { / * debug = new $ .debug ({posto: {x: 'right', y: 'fondo'}, ancho: '480px', altura: '50%', itemDivider:' <hr> ', listdom:' all '}); * / alert (' script lo que carga está completo ');});La función cargada en serie se usa aquí. Por supuesto, también puede usar funciones de carga paralela. Esto se puede usar de acuerdo con la situación. Se recomienda que cada siguiente script tenga dependencia del script anterior para usar la carga en serie, de lo contrario, use la conexión paralela, porque en principio, la conexión paralela es más rápida que la conexión serial.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.