Executando <script> injetado por innerHTML após a chamada AJAX

100

Existe um div chamado "Conteúdo":

<div id="content"></div>

Deve ser preenchido com dados de um arquivo PHP, por AJAX, incluindo uma <script>tag. No entanto, o script dentro desta tag não está sendo executado.

<div id="content"><!-- After AJAX loads the stuff that goes here -->
   <script type="text/javascript">
     //code
   </script>
   <!-- More stuff that DOES work here -->
</div>

javascript html ajax JCOC611
fonte

Como você está carregando o div? depende da biblioteca que você usa, normalmente você pode controlar se deseja apenas executar os scripts após o carregamento do ajax.

Bill Yang

1

Depois window.onloadcrio um XMTHttpRequestobjeto para solicitar outra página (php) que contém o conteúdo da div, incluindo um script. Estou fazendo isso com JS simples, sem bibliotecas (além da minha própria lol)

JCOC611

65

JavaScript inserido como texto DOM não será executado. No entanto, você pode usar o padrão de script dinâmico para atingir seu objetivo. A ideia básica é mover o script que você deseja executar para um arquivo externo e criar uma tag de script ao obter sua resposta Ajax. Em seguida, você define o srcatributo de sua tag de script e voila, carrega e executa o script externo.

Esta outra postagem StackOverflow também pode ser útil para você: Os scripts podem ser inseridos com innerHTML? .

Chocula
fonte

você pode selecionar todos os scripts carregados e executá-los pela função eval ():$('#audit-view script').each(function (index, element) { eval(element.innerHTML); })

Jerzy Gebler

Javascript adicionado à página deve ser executado. ( jsfiddle.net/wnn5fz3m/1 por exemplo). A questão é por que às vezes não?

NoBugs

@Chocula movi meu script para um arquivo separado ainda não funciona da parcial, você pode ajudar com isso? stackoverflow.com/questions/42941856/…

Samra

FYI (@NoBugs me dá uma pista). Eu tentei javascirpt element.innerHTML = zzz e desnt work. Então tentei Jquery $ (element) .html (zzz) e funcionou.

gtryonp

66

Usei este código, está funcionando bem

var arr = MyDiv.getElementsByTagName('script')
for (var n = 0; n < arr.length; n++)
    eval(arr[n].innerHTML)//run script inside div

Firas Nizam
fonte

4

Se você me perguntar, esta é uma resposta muito melhor do que a aceita. Isso é basicamente injeção de JavaScript.

Xedret

Embora útil, isso realmente não responde à pergunta de por que os scripts não rodam. Veja, por exemplo, jsfiddle.net/fkqmcaz7 e jsfiddle.net/wnn5fz3m/1 É absolutamente necessário executar, e não estou encontrando um caso simplificado de onde não funciona.

NoBugs

1

@NaoiseGolden OP está literalmente perguntando sobre a execução do script, então acho que está tudo bem aqui. :-)

dia

1

Eval () não é altamente recomendado. Veja isto - stackoverflow.com/questions/9107847/…

Reis,

15

Se você carregar um bloco de script em seu div via Ajax, como este:

<div id="content">
    <script type="text/javascript">
    function myFunction() {
      //do something
    }
    myFunction();
    </script>
</div>

... simplesmente atualiza o DOM da sua página, myFunction () não é necessariamente chamado.

Você pode usar um método de retorno de chamada Ajax, como o do jQuery método ajax () para definir o que executar quando a solicitação terminar.

O que você está fazendo é diferente de carregar uma página com JavaScript incluído desde o início (que é executado).

Um exemplo de como usar o callback de sucesso e o callback de erro depois de buscar algum conteúdo:

  $.ajax({
    type: 'GET',
    url: 'response.php',
    timeout: 2000,
    success: function(data) {
      $("#content").html(data);
      myFunction();
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      alert("error retrieving content");
    }

Outra maneira rápida e suja é usar eval () para executar qualquer código de script que você inseriu como texto DOM se não quiser usar jQuery ou outra biblioteca.

Christopher Tokar
fonte

usando o retorno de chamada do jQuery, como posso "executar" o código dentro do novo <script>?

JCOC611

Eu adicionei um exemplo de uso de retorno de chamada de sucesso:

Christopher Tokar

1

Muito obrigado! o "myFunction ();" parte era o que eu estava deixando de fora do meu código.

Jason,

11

Aqui está o script que avaliará todas as tags de script no texto.

function evalJSFromHtml(html) {
  var newElement = document.createElement('div');
  newElement.innerHTML = html;

  var scripts = newElement.getElementsByTagName("script");
  for (var i = 0; i < scripts.length; ++i) {
    var script = scripts[i];
    eval(script.innerHTML);
  }
}

Basta chamar esta função depois de receber seu HTML do servidor. Esteja avisado: o uso evalpode ser perigoso.

Demo: http://plnkr.co/edit/LA7OPkRfAtgOhwcAnLrl?p=preview

Evgenii
fonte

5

Isso 'simplesmente funciona' para mim usando jQuery, desde que você não tente anexar um subconjunto do HTML retornado por XHR ao documento. (Veja este relatório de bug mostrando o problema com o jQuery.)

Aqui está um exemplo que mostra como ele funciona:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>test_1.4</title> 
    <script type="text/javascript" charset="utf-8" src="jquery.1.4.2.js"></script> 
    <script type="text/javascript" charset="utf-8"> 
        var snippet = "<div><span id='a'>JS did not run<\/span><script type='text/javascript'>" +
        "$('#a').html('Hooray! JS ran!');" +
        "<\/script><\/div>";
        $(function(){
            $('#replaceable').replaceWith($(snippet));
        });
    </script> 
</head> 
<body> 
    <div id="replaceable">I'm going away.</div> 
</body> 
</html>

Aqui está o equivalente ao acima: http://jsfiddle.net/2CTLH/

Phrogz
fonte

1

Altamente improvável, essa seria a solução para o problema atualmente, já que esse era um bug com uma versão muito antiga do jQuery.

NoBugs

3

Aqui está uma função que você pode usar para analisar respostas AJAX, especialmente se você usar minifiedjs e quiser que ele execute o Javascript retornado ou apenas deseja analisar os scripts sem adicioná-los ao DOM, ela também lida com erros de exceção. Usei esse código na biblioteca php4sack e é útil fora da biblioteca.

function parseScript(_source) {
    var source = _source;
    var scripts = new Array();

    // Strip out tags
    while(source.toLowerCase().indexOf("<script") > -1 || source.toLowerCase().indexOf("</script") > -1) {
        var s = source.toLowerCase().indexOf("<script");
        var s_e = source.indexOf(">", s);
        var e = source.toLowerCase().indexOf("</script", s);
        var e_e = source.indexOf(">", e);

        // Add to scripts array
        scripts.push(source.substring(s_e+1, e));
        // Strip from source
        source = source.substring(0, s) + source.substring(e_e+1);
    }

    // Loop through every script collected and eval it
    for(var i=0; i<scripts.length; i++) {
        try {
          if (scripts[i] != '')
          {         
            try  {          //IE
                  execScript(scripts[i]);   
      }
      catch(ex)           //Firefox
      {
        window.eval(scripts[i]);
      }   

            }  
        }
        catch(e) {
            // do what you want here when a script fails
         // window.alert('Script failed to run - '+scripts[i]);
          if (e instanceof SyntaxError) console.log (e.message+' - '+scripts[i]);
                    }
    }
// Return the cleaned source
    return source;
 }

Andre Van Zuydam
fonte

2

Se você estiver injetando algo que precisa da tag de script, poderá obter um erro de sintaxe não detectado e dizer token ilegal . Para evitar isso, certifique-se de escapar das barras nas tags de fechamento do script. ie;

var output += '<\/script>';

O mesmo vale para qualquer tag de fechamento, como uma tag de formulário.

TommyRay
fonte

0

Eu tinha uma postagem semelhante aqui, addEventListener load on ajax load SEM jquery

Como resolvi isso, insirai chamadas para funções dentro da minha função stateChange. A página que eu configurei tinha 3 botões que carregariam 3 páginas diferentes na contentArea. Como eu precisava saber qual botão estava sendo pressionado para carregar a página 1, 2 ou 3, poderia facilmente usar as instruções if / else para determinar qual página está sendo carregada e, em seguida, qual função executar. O que eu estava tentando fazer era registrar diferentes ouvintes de botão que só funcionariam quando a página específica fosse carregada por causa de IDs de elemento.

tão...

if (page1 está sendo carregado, pageload = 1) execute a função registerListeners1

então o mesmo para a página 2 ou 3.

Richard Chase
fonte

0

Isso funcionou para mim chamando eval em cada conteúdo de script de ajax .done:

$.ajax({}).done(function (data) {      
    $('div#content script').each(function (index, element) { eval(element.innerHTML); 
})

Nota: Eu não escrevi parâmetros em $ .ajax que você deve ajustar de acordo com seu ajax.

Shivgre
fonte

0

Minha conclusão é que o HTML não permite tags SCRIPT NESTED. Se você estiver usando javascript para injetar código HTML que inclua tags de script dentro, não vai funcionar porque o javascript vai em uma tag de script também. Você pode testá-lo com o próximo código e verá que não vai funcionar. O caso de uso é que você está chamando um serviço com AJAX ou similar, está obtendo HTML e deseja injetá-lo no HTML DOM diretamente. Se o código HTML injetado tiver tags SCRIPT dentro, não vai funcionar.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"></head><body></body><script>document.getElementsByTagName("body")[0].innerHTML = "<script>console.log('hi there')</script>\n<div>hello world</div>\n"</script></html>

Antonio Martin
fonte

-3

Outra coisa a fazer é carregar a página com um script como:

<div id="content" onmouseover='myFunction();$(this).prop( 'onmouseover', null );'>
<script type="text/javascript">
function myFunction() {
  //do something
}
myFunction();
</script>
</div>

Isso carregará a página, executará o script e removerá o manipulador de eventos quando a função for executada. Isso não será executado imediatamente após um carregamento de ajax, mas se você estiver esperando que o usuário insira o elemento div, funcionará perfeitamente.

PS. Requer Jquery

Joshua Klein
fonte

Executando <script> injetado por innerHTML após a chamada AJAX

Respostas: