Este artículo presenta principalmente dos métodos para cargar dinámicamente archivos JavaScript. Los amigos interesados pueden referirse a él.
El primero es usar el método AJAX para cargar el código del archivo de script desde el fondo hasta el primer plano, y luego implementar el código para el contenido cargado a través de eval (). El segundo tipo es crear una etiqueta de script, configurar su atributo SRC y cargar JS insertando la etiqueta de script en el cabezal de la página, que es equivalente a escribir A <script src = "..."> </script> en la cabeza, pero esta etiqueta de script se crea usando JS SRC.
Por ejemplo, si queremos cargar un Callbakc.js dinámicamente, necesitamos una etiqueta de script:
El código es el siguiente: Copie el código de la siguiente manera: <script type = "text/javascript" src = "call.js"> </script>
El siguiente código es cómo crear esta etiqueta a través de JS (y agregarla a la cabeza):
El código es el siguiente:
var head = document.getElementsByTagName ('Head') [0]; var script = document.createElement ('script'); script.type = 'text/javaScript'; script.src = 'call.js'; head.appendChild (script);Cuando Call.js está cargado, debemos llamar a los métodos en él. Sin embargo, después de Header.appendChild (script) no podemos llamar a JS de inmediato. Debido a que el navegador carga este JS asincrónicamente, no sabemos cuándo se cargará. Sin embargo, podemos juzgar si Helper.js se está cargando escuchando eventos. (Supongamos que hay un método de devolución de llamada en Call.js) El código es el siguiente:
var head = document.getElementsByTagName ('Head') [0]; var script = document.createElement ('script'); script.type = 'text/javaScript'; script.onreadyStateChange = function () {if (this.readyState == 'Complete') llamado (); } script.Onload = function () {callback (); } script.src = 'helper.js'; head.appendChild (script);Configuré 2 funciones de escucha de eventos porque OnreadyStateChange se usa en IE, mientras que Onload es compatible con Gecko, WebKit Browser y operador. De hecho, este.readyState == 'Complete' no funciona muy bien. Teóricamente, los cambios de estado son los siguientes:
1. Uninicializado
2. Carga
3. Cargada
4. Interactivo
5.complete
Pero algunos estados serán omitidos. Según la experiencia en IE7, solo puede obtener uno de cargado y completado, y no puede aparecer. La razón puede ser que usted determine si la lectura de la caché afecta el cambio en el estado u otras razones. Es mejor cambiar la condición de juicio a esto. ReadyState == 'Cargado' || this.readyState == 'Complete'
Refiriéndose a la implementación de jQuery, finalmente lo implementamos de la siguiente manera: el código es el siguiente:
var head = document.getElementsByTagName ('Head') [0]; var script = document.createElement ('script'); script.type = 'text/javaScript'; script.Onload = script.onreadyStateChange = function () {if (! this.readyState || this.readyState === "cargado" || this.readyState === "completo") {help (); // manejar la fuga de memoria en IE script.Onload = script.onreadyStateChange = null; }}; script.src = 'helper.js'; head.appendChild (script);Hay otra situación simple en la que puede escribir la llamada para ayudar () al final de Helper.js, por lo que puede asegurarse de que se pueda llamar automáticamente después de que Helper.js esté cargado. Por supuesto, al final, esto no es adecuado para su aplicación.
Tenga en cuenta también:
1. Debido a que la etiqueta de script SRC puede acceder a los recursos en todos los dominios, este método puede simular AJAX y resolver el problema del acceso a Dominio cruzado AJAX.
2. Si el código HTML devuelto con AJAX contiene script, insertando script en HTML directamente en el DOM con InnerHTML no puede hacer que el script en HTML funcione. Eché un vistazo al código original de jQuery (). Html (html). JQuery también analiza primero los parámetros pasados, elimina el código de script y crea etiquetas de script dinámicamente. El método HTML utilizado por jQuery se agrega al DOM HTML si contiene script, se puede ejecutar. como:
La copia del código es la siguiente: jQuery ("#content"). Html ("<script> alert ('aa'); <// script>");
Lo anterior es el método para cargar dinámicamente archivos JavaScript. Espero que sea útil para el aprendizaje de todos.