Como você executa um bloco JavaScript carregado dinamicamente?

Eu estou trabalhando em uma página web onde estou fazendo uma chamada AJAX que retorna um pedaço de HTML como:

/** some javascript */

Estou inserindo a coisa toda no DOM, mas o JavaScript não está sendo executado. Existe uma maneira de executá-lo?

Alguns detalhes: Eu não posso controlar o que está no bloco de script (então não posso alterá-lo para uma function que poderia ser chamada), eu só preciso que todo o bloco seja executado. Não consigo chamar eval na resposta porque o JavaScript está dentro de um bloco maior de HTML. Eu poderia fazer algum tipo de regex para separar o JavaScript e chamar eval, mas isso é bem nojento. Alguém sabe de uma maneira melhor?

O script adicionado ao configurar a propriedade innerHTML de um elemento não é executado. Tente criar um novo div, definir seu innerHTML e adicionar esse novo div ao DOM. Por exemplo:

 
 
 

Você não precisa usar o regex se estiver usando a resposta para preencher um div ou algo assim. Você pode usar getElementsByTagName.

 div.innerHTML = response; var scripts = div.getElementsByTagName('script'); for (var ix = 0; ix < scripts.length; ix++) { eval(scripts[ix].text); } 

Enquanto a resposta aceita de @Ed. não funciona nas versões atuais dos navegadores Firefox, Google Chrome ou Safari Eu consegui adotar o exemplo dele para invocar scripts adicionados dinamicamente.

As alterações necessárias são apenas na maneira como os scripts são adicionados ao DOM. Em vez de adicioná-lo como innerHTML o truque era criar um novo elemento de script e adicionar o conteúdo do script real como innerHTML ao elemento criado e, em seguida, append o elemento de script ao destino real.

       
hello world

Isso funciona para mim no Firefox 42, no Google Chrome 48 e no Safari 9.0.3

Uma alternativa é não apenas descarregar o retorno da chamada do Ajax para o DOM usando InnerHTML.

Você pode inserir cada nó dinamicamente e, em seguida, o script será executado.

Caso contrário, o navegador apenas assume que você está inserindo um nó de texto e ignora os scripts.

Usar Eval é um pouco malvado, porque requer outra instância da VM Javascript para ser acionada e JIT a cadeia passada.

O melhor método provavelmente seria identificar e avaliar o conteúdo do bloco de script diretamente por meio do DOM.

Eu seria cuidadoso embora .. se você estiver implementando isso para superar uma limitação de alguma chamada fora do local você está abrindo uma falha de segurança.

Tudo o que você implementar pode ser explorado para o XSS.

Você pode usar uma das bibliotecas populares do Ajax para fazer isso nativamente. Eu gosto do Prototype . Você pode simplesmente adicionar evalScripts: true como parte de sua chamada Ajax e isso acontece automaticamente.

Abaixo está uma abordagem um pouco diferente, que usa o fato de que, se a tag contiver type = “text / xml”, o JavaScript dentro não será executado:

 function preventJS(html) { return html.replace(/

Você pode ler mais aqui - JavaScript: Como evitar a execução de JavaScript dentro de um html sendo adicionado ao DOM . Se funcionar para você, por favor, deixe aqui um comentário com informações sobre qual navegador e versão você usou.