Blog

Entre em contato

Como carregar scripts JavaScript dinamicamente utilizando jQuery

Segue um exemplo bem simples de como carregar scripts dinamicamente utilizando a biblioteca jQuery, mais precisamente a função $.getScript().

Esses dias tivemos que fazer uma implementação na interface visual do Microsoft Dynamics CRM 4.0 que criava um combobox dinamicamente populado com dados provenientes de uma outra entidade e, para isso, tivemos que carregar outros scripts JS dinamicamente após o carregamento da tela.

Fizemos então uma lógica para carregar uma série de scripts, na ordem certa, respeitando assim os scripts dependentes. Vejam como ficou simples:

Como de praxe, carregamos o script do jQuery:

<script src="http://code.jquery.com/jquery-1.5.js"></script>



E incluímos a lógica:

var scripts = ['/JS/Util/meuScript1.js',
               '/JS/Util/esteScriptDependeDoScript1.js', 
               '/JS/MeuScriptPrincipalQueDependeDoScript1e2.js'];
 
function carregarScripts(callback) {
    if (scripts == null || scripts.length == 0) {
        callback();
        return;
    }
    var script = scripts[0];
    scripts = scripts.slice(1);
 
    $.getScript(script, function() { carregarScripts(callback); });
}



Perceba que a variável global “scripts” é um array que contem a URL de cada script a ser carregado, na ordem que deseja que eles sejam carregados, sendo a posição 0 o primeiro.

O único parâmetro do método carregarScripts() é o nome da função que será invocada apos o carregamento de todos os scripts informados no array scripts. Neste caso, invoco uma função que está no ultimo arquivo, responsável pelo processamento geral da pagina (MeuScriptPrincipalQueDependeDoScript1e2.js).

Chamando a função de carregamento:

<script type="text/javascript">
// Esperamos que a pagina seja carregada e esteja "programavel"
$(document).ready(function(){
  carregarScripts(function(){ iniciarProcessamento(); });
});
</script>

Simples.

Podíamos passar as URLs dos scripts em parâmetro à função, ou ainda passar diretamente o array etc… mas desse jeito fica mais fácil de reutilizar.

Curta nossa página!
Arquivo de posts