-1

Tenho um <script> externo sendo adicionado na página via jQuery com:

$("body").append("<scr"+"ipt src='url_do_script.js'></scr"+"ipt>");

Esse script adiciona alguns elementos na página (algumas tags). O script funciona perfeitamente, mas ele é assícrono ao carregamento da página, ou seja, a página carrega normalmente sem esperar o que o script irá retornar. Porém eu preciso manipular algumas tags retornadas por este .js assim que elas estiverem disponíveis.

O problema é que não encontrei uma forma de saber quando esse script já foi totalmente carregado na página com jQuery.

Com JavaScript puro eu consigo saber adicionando o script via document.createElement e appendChild. Basta fazer um .onload:

var e = document.createElement("script");
e.src = "url_do_script.js";
document.body.appendChild(e);

e.onload = function(){
   // o script foi totalmente carregado
}

Como fazer algo com o .append do jQuery? Já tentei outras formas como .get, .load e .ajax mas não funciona devido aos CORS (Cross-origin resource sharing).

Tentei colocar um onload="funcao()" no <script> e também não funcionou.

Alguma ideia de como fazer isso ou há uma outra forma usando jQuery sem ser com .append?

1
  • O fato de onload não funcionar, é que o elemento script não possui esse evento. Quando você utiliza com createElement, ele está criando um objeto com suporte a esse evento, não necessariamente criando o elemento em si. Já tentou com o getScript? Você também pode criar extender o jquery 5/01/2018 às 0:35

1 Resposta 1

1

Consegui resolver a questão com a dica do @Valdeir Psr. Bastou adicionar o getScript logo após o append que o código reconheceu que os elementos foram carregados na página:

$("body").append('<scr'+'ipt src="url_do_script.js"></scr'+'ipt>');
$.getScript( "url_do_script.js", function() {
   // fazer algo após o script ter sido carregado
});

Não apresentou erro de CORS nem nada. Funcionou perfeitamente.

ATUALIZAÇÃO

Verdade que fazendo um append e usando getScript, o script estava sendo chamado 2 vezes.

Como é preciso existir a tag <script> completa na página (<script src="url_do_script.js"></script>) senão ele não funciona neste caso específico, pois ele ainda possui um id (<script id="id_qualquer" src="url_do_script.js"></script>) e é baseado nesse id que o script funciona, contornei o problema da seguinte forma:

$("body").append('<script id="id_qualquer"></scr'+'ipt>');
$("#id_qualquer").attr("src","url_do_script.js");
$.getScript("url_do_script.js")
.done(function(){
   // fazer algo após o script ter sido carregado;
});

Adicionei o src do script via id e executei no getScript após o .done. Funcionou perfeitamente.

9
  • 2
    Não faz sentido usar append e getScript ao mesmo tempo, você está mandando carregar o arquivo duas vezes.
    – bfavaretto
    7/01/2018 às 1:05
  • @bfavaretto Verdade. Embora estivesse funcionando, eu verifiquei via console que estava retornando 2 vezes uma informação do script. Fiz as modificações acima e agora funciona sem duplicidade. Obg!
    – Sam
    7/01/2018 às 2:06
  • Mas continua carregando duas vezes. Veja a aba "rede" do seu console. Provavelmente uma das duas requisições virá do cache, mas mesmo assim é estranho deixar o código desse jeito. Se a sua tag script tem um id, você pode pegar esse ID por JS e tratar o carregamento com um onload desse elemento, mais ou menos como você mostrou na pergunta.
    – bfavaretto
    7/01/2018 às 13:13
  • @bfavaretto Eu testei antes, realmente estava requisitando duas vezes, pois retornava um erro 2x. Depois da mudança, só retornou 1x e consegui alterar o que eu queria. Bom, eu tentei pelo onload com uma função onload="funcao()" e sequer entrou na função. É porque trata-se de um serviço de banner de propaganda e só funciona desse modo. A programação do .js deles exige que haja a tag na página com o id específico e tudo, senão não funciona. Desta forma que fiz, o script não surte efeito ao colocar o src separado. Só surte efeito no getScript. Valeu!
    – Sam
    7/01/2018 às 13:20
  • @bfavaretto resumindo, o que fiz foi apenas construir a tag... a execução se dá no getScript. Abs!
    – Sam
    7/01/2018 às 13:26

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 .