8

Gostaria de saber como fazer para carregar a biblioteca do jQuery com JavaScript puro e rodar algo simples com jQuery após sua carga?

Meu código está desta forma:

function colocaScript(){
    var scriptJquery   = document.createElement('script')
    scriptJquery.type  = 'text/javascript';
    scriptJquery.src   = "http://code.jquery.com/jquery-1.10.2.min.js";
    scriptJquery.async = true;
    headHTML = document.getElementsByTagName('head')[0];
    headHTML.insertBefore(scriptJquery,headHTML.firstChild);
}

colocaScript()
$(document).ready(function () {
        alert("Ola Mundo");
})

Ele retorna este erro:

Uncaught ReferenceError: $ is not defined
1
  • Testei seu código e está funcionando perfeitamente, tente em uma página nova, limpa, sem nenhum conteúdo, apenas o esqueleto html. 19/02/2014 às 13:54

3 Respostas 3

2

Passe uma função de callback como parâmetro para a função "colocaScript" e esse callback deve rodar no "onload" do script.

        function colocaScript(callback)
        {
            var scriptJquery = document.createElement('script')
            scriptJquery.type = 'text/javascript';
            scriptJquery.src = "http://code.jquery.com/jquery-1.10.2.min.js";
            scriptJquery.async = true;
            scriptJquery.onload = function()
            {
                callback();
            };
            headHTML = document.getElementsByTagName('head')[0];
            headHTML.insertBefore(scriptJquery, headHTML.firstChild);
        }

        colocaScript(function()
        {
            $(document).ready(function()
            {
                alert("Ola Mundo");
            })

        });
2

Use está função

src = url do arquivo por exemplo http://code.jquery.com/jquery-1.10.2.min.js

uso do callback

LoadScript("http://code.jquery.com/jquery-1.10.2.min.js",function(){ alert('Acabou de carregar')  })

Função

 LoadScript = function (src, callback) {
            var s,
                r,
                t;
            var callback = (typeof(callback)=='function')? callback : function(){};
            r = false;
            s = document.createElement('script');
            s.type = 'text/javascript';
            s.src = src;
            s.async = true;
            s.onload = s.onreadystatechange = function () {
                //alert(this.readyState);
                if (!r && (!this.readyState || this.readyState == 'complete' || this.readyState == 'loaded') ) {
                    r = true;                
                    console.log("js carregado: "+src);
                    callback.call(this);
                }
            };
            try {
                t = document.getElementsByTagName('script')[0];
                t.parent.insertBefore(s, t);
            } catch (e) {
                t = document.getElementsByTagName('head')[0];
                t.appendChild(s);           
            }
        }   
5
  • Acho que é por isso que ele tem erros, deve estar tentando utilizar jQuery antes de terminar de carregar o script, boa sacada ;) 19/02/2014 às 14:02
  • Hein? Injeção de script assim não sofre problema de cross-domain. O erro que você postou tem a ver com outra questão de segurança, HTTP vs. HTTPS
    – bfavaretto
    19/02/2014 às 17:30
  • tem razão, é que eu não tenho muito conhecimento nisso mas se você quiser editar minha pergunta eu agradeço 19/02/2014 às 17:32
  • Eu somente removeria o final.
    – bfavaretto
    19/02/2014 às 17:38
  • Pronto, removi.... 19/02/2014 às 17:39
1

O problema é que o seu script carrega assíncrono, e por causa disso o jQuery é chamado directamente depois de colocaScript() e que é antes do script ter carregado.

Use assim:

window.onload = function () {
    $(document).ready(function () {
        alert("Ola Mundo");
    })
}

Exemplo

Neste caso usei window.onload, mas pode usar o onload também para controlar quando o script tiver carregado como o Lucas referiu.

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 .