Este ejemplo resume los métodos de carga dinámica JS. Compártelo para su referencia. Los detalles son los siguientes:
Método 1: Direct Document.Write (Asynchronous)
Copie el código de la siguiente manera: <script language = "javaScript">
document.write ("<script src = 'res/extwidget/echarts/xx.js'> <// script>");
</script>
Dado que este método es una carga asíncrona, document.write reescribirá la interfaz, que obviamente no es práctica
Método 2: Cambie dinámicamente el atributo SRC del script existente (asíncrono)
Copie el código de la siguiente manera: <script src = '' id = "xx"> </script>
<script language = "javaScript">
xx.src = "test.js"
</script>
Este método no cambiará los elementos de la interfaz, no reescribirá los elementos de la interfaz, sino que también se cargará de forma asincrónica
Método 3: crear dinámicamente elementos de script (asíncrono)
Copie el código de la siguiente manera: <script>
var cuerpo = document.getElementsByTagName ('Body'). [0];
var script = document.createElement ("script");
script.type = "text/javaScript";
script.src = "xx.js";
Body.AppendChild (Oscript);
</script>
En comparación con el segundo método, la ventaja de este método es que no requiere escribir una etiqueta de script en la interfaz al principio. La desventaja es la carga asíncrona
Método 4: XMLHTTPREQUEST/ACTIVEXOBECTOPED (Asynchronous)
Copie el código de la siguiente manera:/**
* Carga asíncrona de guiones JS
* @param ID La identificación de la etiqueta <script> que debe establecerse
* @param url relativo o ruta absoluta al archivo js
*/
loadjs: function (id, url) {
var xmlhttp = null;
if (window.activexObject) {// es decir
intentar {
// se puede usar en IE6 y versiones posteriores
xmlhttp = new ActiveXObject ("msxml2.xmlhttp");
} catch (e) {
//Ie5.5 y se pueden usar versiones posteriores
xmlhttp = new ActiveXObject ("Microsoft.xmlhttp");
}
} else if (window.xmlhttprequest) {
// Firefox, Opera 8.0+, Safari, Chrome
xmlhttp = new xmlhttprequest ();
}
// Usar carga sincrónica
xmlhttp.open ("get", url, falso);
// Enviar solicitud de sincronización,
// Si el navegador es Chrome u Opera, debe publicarse antes de que pueda ejecutarse, de lo contrario se informará un error
xmlhttp.send (nulo);
xmlhttp.onreadyStateChange = function () {
// 4 significa que los datos han sido enviados
if (xmlhttp.readyState == 4) {
// 0 es el área local de acceso, 200 a 300 significa que el acceso al servidor es exitoso.
// 304 significa que el acceso es caché sin modificación
if ((xmlhttp.status> = 200 && xmlhttp.status <300) || xmlhttp.status == 0 || xmlhttp.status == 304) {
var myBody = document.getElementsByTagName ("Body") [0];
var myScript = document.createElement ("script");
myscript.language = "javaScript";
myscript.type = "text/javaScript";
myscript.id = id;
intentar{
// IE8 y el siguiente no admite este método, y debe configurarse a través del atributo de texto
myScript.AppendChild (document.createTextNode (xmlhttp.esponsetext));
} catch (ex) {
myscript.Text = xmlhttp.esponsetext;
}
myBody.appendChild (myScript);
}
}
}
// Usó carga asíncrona
xmlhttp.open ("get", url, verdadero);
xmlhttp.send (nulo);
}
Establecer en falso en abierto significa carga sincrónica. La carga sincrónica no requiere establecer un evento OnreadyStateChange
Estos cuatro métodos se ejecutan de manera asincrónica, es decir, mientras carga estos scripts, el script en la página principal continúa ejecutándose.
Método 5: cargación xmlhttprequest/activoxObject (sincrónico)
Copie el código de la siguiente manera:/**
* Carga sincrónica de scripts JS
* @param ID La identificación de la etiqueta <script> que debe establecerse
* @param url relativo o ruta absoluta al archivo js
* @return {boolean} Devuelve si se carga correctamente, verdadero significa éxito, falso significa falla
*/
loadjs: function (id, url) {
var xmlhttp = null;
if (window.activexObject) {// es decir
intentar {
// se puede usar en IE6 y versiones posteriores
xmlhttp = new ActiveXObject ("msxml2.xmlhttp");
} catch (e) {
//Ie5.5 y se pueden usar versiones posteriores
xmlhttp = new ActiveXObject ("Microsoft.xmlhttp");
}
} else if (window.xmlhttprequest) {
// Firefox, Opera 8.0+, Safari, Chrome
xmlhttp = new xmlhttprequest ();
}
// Usar carga sincrónica
xmlhttp.open ("get", url, falso);
// Enviar una solicitud de sincronización. Si el navegador es Chrome u Opera, debe publicarse antes de que pueda ejecutarse, de lo contrario se informará un error
xmlhttp.send (nulo);
// 4 significa que los datos han sido enviados
if (xmlhttp.readyState == 4) {
// 0 es el área local accedida. 200 a 300 significa que el acceso al servidor es exitoso, y 304 significa que no se realiza el caché al que se accede.
if ((xmlhttp.status> = 200 && xmlhttp.status <300) || xmlhttp.status == 0 || xmlhttp.status == 304) {
var myBody = document.getElementsByTagName ("Body") [0];
var myScript = document.createElement ("script");
myscript.language = "javaScript";
myscript.type = "text/javaScript";
myscript.id = id;
intentar{
// IE8 y el siguiente no admite este método, y debe configurarse a través del atributo de texto
myScript.AppendChild (document.createTextNode (xmlhttp.esponsetext));
} catch (ex) {
myscript.Text = xmlhttp.esponsetext;
}
myBody.appendChild (myScript);
devolver verdadero;
}demás{
devolver falso;
}
}demás{
devolver falso;
}
}
Espero que este artículo sea útil para la programación de JavaScript de todos.