Muitas pessoas podem ter encontrado o problema de carregar outros arquivos JS em JavaScript, mas muitos amigos podem não saber como julgar se o arquivo JS que queremos carregar foi carregado. Se não concluirmos a carga, não teremos sucesso. Este artigo explica como carregar outros arquivos JS em JS e executar funções de retorno de chamada após o carregamento.
Podemos criar um elemento <Script> dinamicamente e, em seguida, carregar o script alterando seu atributo SRC, mas como sabemos que o arquivo de script foi carregado? Porque algumas de nossas funções precisam ser executadas após o carregamento do script e efetuado.
Depois de procurar recursos na rede, descobri que, no navegador do IE, você pode usar o OnreadyStateChange do elemento <Script> para monitorar a alteração no estado de carregamento e determinar se o script é carregado ou concluído ao julgar se o seu Estado Ready está carregado ou concluído. Em vez de navegadores do IE, você pode usar o ONLOAD para determinar diretamente se o script está carregado.
Um processo de implementação simples se parece com o seguinte:
// ou seja, em: var script = document.createElement ("script"); script.setAttribute ("type", "text/javascript"); script.onReadyStateChange = function () {if (this.readystate == "carregado" || this.readystate == "complete") {alert ("carregou bem -sucedido" | }} script.setAttribute ("src", scripts [i]); // ópera, ff, chrome, etc.: var script = document.createElement ("script"); script.setAttribute ("type", "ladra"/javascript "); script.onload = function () {alert", "ladra" com sucesso! ");} script.setAttribute (" src ", scripts [i]);O princípio é muito simples. Com base nesses dois princípios simples, fizemos algumas modificações e mudei para duas funções, a saber, carregamento em série e scripts de carregamento paralelo.
Ao passar por uma matriz contendo vários caminhos de arquivo JS, a função de carregamento serial começa a partir do primeiro carregamento do arquivo de script. Cada vez que um é carregado com sucesso, o próximo arquivo de script será carregado. Depois que todo o carregamento for concluído, a função de retorno de chamada será executada. O carregamento paralelo é carregar todos os arquivos de script desde o início, ou seja, eles começam do mesmo ponto e, quando todo o carregamento é concluído, a função de retorno de chamada é executada.
Após o teste, essas duas funções são compatíveis com todos os navegadores mainstream atuais.
/*** Concatenar carregamento do script especificado* Carregamento concatenado [assíncrono] Carregando um por um, cada carregamento é concluído, o próximo é carregado* Após a conclusão de todo o carregamento, a função do script especificada* Scret Return* Return* @param Array | String o script script* @) A função da função chamado back após o sucesso* @GrenTurn* SérieLoadScripts (scripts, retorno de chamada) {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) {// recursivos s [i] = document.createElement ("script"); s [i] .setAttribute ("tipo", "text/javascript"); s [i] .onload = s [i] .onReadyStateChange = function () {// Anexe os manipuladores a todos os navegadores se (!/*@cc_on!@*/0 || this.readyState == "carregado" || this.readystate == "complete) {this.onload = this.onReadTechange this.parentnode.removeChild (isto); if (i! = Último) ReluseLoad (i + 1); caso contrário, if (typeof (retorno de chamada) == "function") retorno de chamada (); }} s [i] .setAttribute ("src", scripts [i]); Head.appendChild (s [i]); }; RecursiveLoad (0);} /*** Carregue o script especificado em paralelo* Carregar em paralelo [síncrono] ao mesmo tempo, independentemente de a carga anterior ser concluída ou não, carregue tudo diretamente* Execute o script de retorno de reclatagem de scripts de scripts de scripts de scripts de scripts de scripts* parallelloadscripts (scripts, retorno de chamada) {if (typeof (scripts)! = "objeto") var scripts = [scripts]; var head = document.getElementsByTagName ("Head"). Item (0) || document.documentElement, s = new Array (), carregado = 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 () {// Anexe os manipuladores a todos os navegadores se (!/*@cc_on!@*/0 || this.readyState == "carregado" || this.readystate == "complete") {carregado ++; this.onReadyStateChange = NULL; this.parentnode.removeChild (isto); if (carregado == scripts.length && typeof (retorno de chamada) == "function") retorno de chamada (); }}; s [i] .setAttribute ("src", scripts [i]); Head.appendChild (s [i]); }}Aqui, a tag <Script> é inserida dinamicamente na tag <head> na página e o elemento de tag será removido automaticamente após o carregamento.
Se você tiver cuidado, também descobrirá que um método chamado compilação condicional é usado aqui como uma expressão (!/*@Cc_on!@*/0) para determinar se não é um navegador do IE. A compilação condicional não é o foco deste artigo. Se você estiver interessado, pode procurar materiais relevantes para aprender.
Como usar estas duas funções: aqui declaramos uma variável de matriz que contém dois endereços de arquivo JS remoto (é claro, o script de chamada <script> suporta o domínio cruzado):
var scripts = ["http://ajax.googleapis.com/ajax/libs/jquery/1.4.4 e o plug -in de depuração do jQuery // você pode usar o seguinte método para ligar e executar o retorno de chamada após o sucesso. SérieLoadScripts (scripts, function () { / * Debug = new $ .Debug ({Posto: {x: 'Right', y: 'Bottom'}, largura: '480px', altura: '50%', slitt';A função carregada em série é usada aqui. Obviamente, você também pode usar funções de carregamento paralelo. Isso pode ser usado de acordo com a situação. Recomenda -se que cada próximo script dependa do script anterior para usar o carregamento serial, caso contrário, use a conexão paralela, porque, em princípio, a conexão paralela é mais rápida que a conexão serial.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.