1

Olá, meus amigos! Boa noite!

Sou iniciante em JavaScript e estou diante da seguinte situação: Tenho um script chamado widget.js em minha página inicial e este script realiza uma requisição em busca de um html "complementar", numa segunda página chamada widget.php. Nesta segunda página (widget.php) eu tenho um função JavaScript.

O problema é o seguinte... Quando eu faço a requisição com XMLHttpRequest, tudo que preciso (html e js) são colocados em minha página inicial (posso ver inspecionando), mas a função me retorna o seguinte erro: Uncaught ReferenceError: teste is not defined

Ou seja, a função vinda do widget.php é escrita, mas não é executada. Segue o resumão do meu código:

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Teste</title>
</head>
<body>
<script async="" src="https://meusite.com/widget.js"></script>
</body>
</html>

widget.js

url = 'https://meusite.com/widget.php';
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) { 
        var resp = this.response; 
        var el = document.querySelector('body');
        var html = '<div>'+resp+'</div>';
        el.insertAdjacentHTML('beforeend', html);  
    }
};
xhr.open('GET', url, true);
xhr.send();

widget.php

<h1>Título</h1>
<p>Descrição</p>
<button onclick="teste();">Ok</button>

<script type="text/javascript">
    function teste() {
        alert('Ok!');
    } 
</script> 

Seguem as imagens de retorno.

Ao carregar:

inserir a descrição da imagem aqui

Após chamar a função manualmente:

inserir a descrição da imagem aqui

Uma coisa importante: não posso usar jQuery. Inclusive, já testei com ele e funciona muito bem. Precisa ser com JavaScript puro mesmo. Também já testei com innerHTML e eval(), e não consegui fazer funcionar.

Então é isso, pessoal. Alguém sabe por que isso está acontecendo e como posso solucionar? Muito obrigado a todos!

2
  • Na tag <script type="text/javascript"> retire o atributo type="text/javascript" em HTML5 basta <script> Commented 2/03/2020 às 9:00
  • Muda a forma de importação desses arquivos mano. Commented 2/03/2020 às 11:43

1 Resposta 1

1

Quando você carrega um trecho de script via AJAX, ele é incluído no DOM mas não é carregado na memória do JS, portanto o código não é executado e as funções não existem. O que você pode fazer é verificar se no retorno do AJAX possui tags <scripts> e inserir na página através do document.createElement("script"). Através desse método, o script é carregado na memória.

Só que me vez de usar var html = '<div>'+resp+'</div>'; para montar a nova div, use var html = document.createElement("div"); para criar a div e insira a resposta do AJAX através o .innerHTML nessa div e em seguida insira tudo na página com el.appendChild(html);.

var html = document.createElement("div"); //  cria a div
html.innerHTML = resp; // insere na div a resposta do AJAX
el.appendChild(html); // insere no body

Após isso, você irá buscar dentro dessa nova div inserida alguma tag script:

var scripts = html.querySelectorAll("script");

E verificar se existe com um if:

if(scripts.length){
}

Se existir o scripts.length irá retornar um valor maior que 0. Dentro do if você faz um laço concatenando numa variável todo o conteúdo das tags script existentes e ao mesmo tempo removendo-as do DOM, para depois inserir uma nova tag script no body com o conteúdo concatenado:

if(scripts.length){
  var codigos = '';
   for(var sc = 0; sc < scripts.length; sc++){
      codigos += scripts[sc].innerHTML;
      scripts[sc].outerHTML = ''; // remove do DOM
   }
   script = document.createElement("script");
   script.innerHTML = codigos;
   el.appendChild(script);
}

Desta forma a página terá uma nova tag script com todo o código do (ou dos) script retornado pelo AJAX e estará carregada na memória do JavaScript para ser executada. Veja o código completo:

url = 'https://meusite.com/widget.php';
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) { 
        var resp = this.response;
        var el = document.querySelector('body');
        var html = document.createElement("div");
        html.innerHTML = resp;
        el.appendChild(html);
        var scripts = html.querySelectorAll("script");
        if(scripts.length){
           var codigos = '';
            for(var sc = 0; sc < scripts.length; sc++){
               codigos += scripts[sc].innerHTML;
               scripts[sc].outerHTML = '';
            }
            script = document.createElement("script");
            script.innerHTML = codigos;
            el.appendChild(script);
        }
    }
};
xhr.open('GET', url, true);
xhr.send();

Repare que usei el.appendChild(html); para inserir a div com o retorno do AJAX no final do body, mas você poderia usar também o método .insertAdjacentHTML() da seguinte forma:

el.insertAdjacentHTML('beforeend', html.outerHTML);
1
  • Muito obrigado pelo auxílio e explicação, @sam! Funcionou que é uma beleza! Abraços! Commented 2/03/2020 às 16:53

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 .