Este exemplo resume os métodos de carregamento dinamicamente JS. Compartilhe para sua referência. Os detalhes são os seguintes:
Método 1: Documento direto.Write (assíncrono)
Copie o código da seguinte forma: <Script Language = "JavaScript">
document.write ("<script src = 'res/extwidget/echarts/xx.js'> <// script>");
</script>
Como esse método é o carregamento assíncrono, o documento.write reescreverá a interface, o que obviamente não é prático
Método 2: Altere dinamicamente o atributo SRC do script existente (assíncrono)
Copie o código da seguinte forma: <script src = '' id = "xx"> </sCript>
<Script Language = "JavaScript">
xx.src = "test.js"
</script>
Este método não alterará os elementos da interface, não reescreva os elementos da interface, mas também será carregado de forma assíncrona
Método 3: Crie dinamicamente elementos de script (assíncronos)
Copie o código da seguinte forma: <Cript>
var corpo = document.getElementsByTagName ('corpo'). [0];
var script = document.createElement ("script");
script.type = "text/javascript";
script.src = "xx.js";
body.appendChild (Oscript);
</script>
Comparado com o segundo método, a vantagem desse método é que ele não requer gravar uma tag de script na interface no início. A desvantagem é o carregamento assíncrono
Método 4: XmlHttPrequest/ActivexObject Carreging (assíncrono)
Copie o código da seguinte forma:/**
* Carga assíncrona de scripts JS
* @param id o id da tag <cript> que precisa ser definido
* @param URL Relativo ou absoluto caminho para o arquivo JS
*/
loadjs: function (id, url) {
var xmlhttp = null;
if (window.activexObject) {// ie
tentar {
// pode ser usado no IE6 e versões posteriores
xmlHttp = new ActivexObject ("msxml2.xmlHttp");
} catch (e) {
//Ie5.5 e versões posteriores podem ser usadas
xmlhttp = new ActiveXObject ("Microsoft.xmlHttp");
}
} else if (window.xmlhttprequest) {
// Firefox, Opera 8.0+, Safari, Chrome
xmlHttp = new XmlHttPrequest ();
}
// Use carregamento síncrono
xmlhttp.open ("get", url, false);
// Enviar solicitação de sincronização,
// Se o navegador for Chrome ou Opera, ele deve ser publicado antes que possa ser executado; caso contrário, um erro será relatado
xmlhttp.send (nulo);
xmlhttp.onreadystatechange = function () {
// 4 significa que os dados foram enviados
if (xmlhttp.readyState == 4) {
// 0 é a área local acessada, 200 a 300 significa que o acesso ao servidor é bem -sucedido.
// 304 significa que o acesso é cache sem modificação
if ((xmlhttp.status> = 200 && xmlhttp.status <300) || xmlhttp.status == 0 || xmlHttp.status == 304) {
var mybody = document.getElementsByTagName ("corpo") [0];
var myScript = document.createElement ("script");
myscript.language = "javascript";
myscript.type = "text/javascript";
myscript.id = id;
tentar{
// IE8 e o seguinte não suportam esse método e precisam ser definidos através do atributo de texto
myscript.appendChild (document.createTextNode (xmlhttp.RESPONETEXT));
} catch (ex) {
myscript.Text = xmlHttp.ResponseText;
}
MyBody.AppendChild (MyScript);
}
}
}
// usou carregamento assíncrono
xmlhttp.open ("get", url, true);
xmlhttp.send (nulo);
}
Configuração para False em Open significa carregamento síncrono. O carregamento síncrono não requer definição de evento
Esses quatro métodos são executados de forma assíncrona, ou seja, ao carregar esses scripts, o script na página principal continua sendo executado.
Método 5: XmlHttPrequest/ActivexObject Carreging (síncrono)
Copie o código da seguinte forma:/**
* Carga síncrona de scripts JS
* @param id o id da tag <cript> que precisa ser definido
* @param URL Relativo ou absoluto caminho para o arquivo JS
* @return {boolean} retorna se ele carrega com sucesso, true significa sucesso, false significa falha
*/
loadjs: function (id, url) {
var xmlhttp = null;
if (window.activexObject) {// ie
tentar {
// pode ser usado no IE6 e versões posteriores
xmlHttp = new ActivexObject ("msxml2.xmlHttp");
} catch (e) {
//Ie5.5 e versões posteriores podem ser usadas
xmlhttp = new ActiveXObject ("Microsoft.xmlHttp");
}
} else if (window.xmlhttprequest) {
// Firefox, Opera 8.0+, Safari, Chrome
xmlHttp = new XmlHttPrequest ();
}
// Use carregamento síncrono
xmlhttp.open ("get", url, false);
// Envie uma solicitação de sincronização. Se o navegador for Chrome ou Opera, ele deve ser publicado antes que possa ser executado; caso contrário, um erro será relatado
xmlhttp.send (nulo);
// 4 significa que os dados foram enviados
if (xmlhttp.readyState == 4) {
// 0 é a área local acessada. 200 a 300 significa que o acesso ao servidor é bem -sucedido e 304 significa que o cache acessado não é feito.
if ((xmlhttp.status> = 200 && xmlhttp.status <300) || xmlhttp.status == 0 || xmlHttp.status == 304) {
var mybody = document.getElementsByTagName ("corpo") [0];
var myScript = document.createElement ("script");
myscript.language = "javascript";
myscript.type = "text/javascript";
myscript.id = id;
tentar{
// IE8 e o seguinte não suportam esse método e precisam ser definidos através do atributo de texto
myscript.appendChild (document.createTextNode (xmlhttp.RESPONETEXT));
} catch (ex) {
myscript.Text = xmlHttp.ResponseText;
}
MyBody.AppendChild (MyScript);
retornar true;
}outro{
retornar falso;
}
}outro{
retornar falso;
}
}
Espero que este artigo seja útil para a programação JavaScript de todos.