5

Eu criei uma função em JavaScript que quando executada cria uma tag <script> em <head> que carrega um arquivo de JavaScript externo.

Eu quero fazer com que depois que essa tag seja criada, uma segunda função localizada dentro desse arquivo que acabou de ser carregado seja chamada, porém parte do nome dessa segunda função é o parametro da primeira função. Aqui está um exemplo:

Começo criando a tag <script>:

function funcao_um (parametro) {
    var script = document.createElement('script');
    script.src = 'nomeDoArquivo.js';
    document.getElementsByTagName('head')[0].appendChild(script);

Agora que ela está criada, dentro dessa mesma função quero chamar uma outra função chamada "funcao_parametro();", que está no arquivo .js que acabou de ser carregado.

Já tentei usar vários códigos como return "funcao_" + parametro + "();" e inclusive o tão polêmico eval, enfim, já tentei de todo jeito e não consegui, ou o Chrome diz que a função não está definida ou o script inteiro não funciona. Poderiam me ajudar por favor? Sou novato em JavaScript e não faço idéia de como fazer isso.

Obs.: Tenho certeza que o outro arquivo JS está OK, então o problema não está nele.

0

4 Respostas 4

4

Deixe me ver se entendi: você quer chamar uma função (previamento carregada!) cujo nome você tem em forma de string, certo?

É só utilizar o objeto window!

Toda função que singelamente chamamos de global no JavaScript na verdade faz parte do objeto window (que é a janela atual, ou aba se preferir).

Utilizemos como exemplo o a função foo:

function foo() {
    alert('foo!');
}

A função foo é uma propriedade do objeto window. Ou seja, existem três jeitos de chamarmos essa função:

  • Apenas foo().
  • De forma mais completa: window.foo().
  • Ou ainda: window['foo']().

Repare que no terceiro exemplo utilizamos uma string com o nome do método (foo). Lembre-se que, a grosso modo, um objeto JavaScript é apenas um "grande hashmap".

O terceiro exemplo lhe atenderia!


Por quê o eval não funcionou?

Seguindo o exemplo acima, eval('foo()') funcionaria. Não sei dizer o por quê de no seu caso não ter funcionado...

E claro, não vou entrar na discussão de não se utilizar a função eval pois tu já demonstraste entender um pouco sobre isso (:


p.s.: considere fazer de outra maneira

Utilizar o nome de uma referência a ser chamada programaticamente pode significar um código de díficil manuntenção e/ou confuso (especialmente se o código crescer).

Lembre-se que em JavaScript funções são cidadãos de primeira classe. Isto é, funções podem ser retornadas e atribuídas a variáveis:

function obterAcao() {
    return function() { alert('ação!'); }
}

var acao = obterAcao();
//...
acao();

Talvez utilizar funções dessa maneira deixe seu código mais legível e com melhor manutenabilidade. Fica a dica.

1
  • 1
    Eu acho que o eval não funcionou porque ele está tentando invocar a função sem aguardar o carregamento do js.
    – bfavaretto
    Commented 13/06/2014 às 1:10
2

Está a fazer da maneira correta. Só faltou isto:

script.setAttribute('type','text/javascript'); 

para dizer ao Browser que tipo de conteúdo é.

Dê uma olhada neste exemplo e repare que o alerta surge duas vezes. Uma quando carrega, e uma outra depois dos 5 segundos, pois a função recem inserida está agora presente/no escopo do código.

function funcao_um(parametro) {
    var script = document.createElement('script');
    script.setAttribute('type','text/javascript'); 
    script.src = 'https://rawgit.com/SergioCrisostomo/version-files/master/soPT_script1.js';
    document.getElementsByTagName('head')[0].appendChild(script);
}
funcao_um();
setTimeout(function(){
  dentroDoScript();
}, 5000)

E dentro do ficheiro externo tenho isto:

function dentroDoScript(){
     alert('Estou vivo!');
}
dentroDoScript();
2

Para incluir um script dinamicamente, use a seguinte função:

function include(url, callback, conteudo) {
    var script = document.createElement('script');

    script.type = 'text/javascript';
    script.async = 'async';
    script.defer = 'defer';
    script.src = url;
    if (conteudo) script.innerText = conteudo;

    if (script.readyState) {
        script.onreadystatechange = function () {
            if (script.readyState === 'loaded' || script.readyState === 'complete') {
                script.onreadystatechange = null;
                callback && callback();
            }
        }
    }
    else {
        script.onload = callback;
    }

    document.body.appendChild(script);
}

E use assim:

include('/meuscript.js', function() {
    // código aqui
});

Mais um exemplo, carregando jQuery dinamicamente:

include('http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js', function() {
    alert($('body').html());
}); 
2

Se a segunda função estiver no escopo global, basta invocá-la a partir do objeto window. Lembre-se também de aguardar o carregamento do script como indicado nas outras respostas:

function funcao_um (parametro) {
    var script = document.createElement('script');
    script.src = 'nomeDoArquivo.js';
    document.getElementsByTagName('head')[0].appendChild(script);
    script.onload = function() {
        // invoca a função do segundo arquivo
        window["funcao_" + parametro]();
    }
}
1
  • Tentei fazer do seu jeito mas não funcionou, deu o erro "Uncaught TypeError: undefined is not a function" na linha logo após o seu comentário.
    – José Neto
    Commented 13/06/2014 às 1:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .