Tentei carregar alguns scripts em uma página usando innerHTMLa <div>. Parece que o script é carregado no DOM, mas nunca é executado (pelo menos no Firefox e Chrome). Existe uma maneira de executar scripts ao inseri-los innerHTML?
Código de amostra:
<!DOCTYPE html>
<html>
<body onload="document.getElementById('loader').innerHTML = '<script>alert(\'hi\')<\/script>'">
Shouldn't an alert saying 'hi' appear?
<div id="loader"></div>
</body>
</html>Respostas:
Você precisa usar eval () para executar qualquer código de script que você inseriu como texto DOM.
O MooTools fará isso por você automaticamente, e tenho certeza que o jQuery também o faria (dependendo da versão. O jQuery versão 1.6+ usa eval). Isso economiza muito trabalho de analisar <script>tags e escapar do seu conteúdo, além de várias outras "dicas".
Geralmente, se você for fazer eval()isso por conta própria, deseja criar / enviar o código de script sem nenhuma marcação HTML, como <script>, pois isso não ocorrerá eval()corretamente.
<script>tag com innerHTMLpode ser curto, mas não funciona. É tudo apenas texto sem formatação até que seja executado eval(). E, infelizmente, eval()não analisa tags HTML, então você acaba com uma cadeia de problemas.
Aqui está uma solução muito interessante para o seu problema: http://24ways.org/2005/have-your-dom-and-script-it-too
Portanto, use isso em vez de tags de script:
<img src="empty.gif" onload="alert('test');this.parentNode.removeChild(this);" />
onloadatributo. Além disso, isso requer que um arquivo adicional exista e seja carregado. A solução da momo é menos comprometida.
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">(isso não fará uma solicitação de rede) Na verdade ... você NÃO precisa de uma imagem, faça referência a uma imagem inexistente e, em vez de onloadusar onerror(mas isso fará uma solicitação de rede)
Aqui está um método que substitui recursivamente todos os scripts por executáveis:
function nodeScriptReplace(node) {
if ( nodeScriptIs(node) === true ) {
node.parentNode.replaceChild( nodeScriptClone(node) , node );
}
else {
var i = 0;
var children = node.childNodes;
while ( i < children.length ) {
nodeScriptReplace( children[i++] );
}
}
return node;
}
function nodeScriptIs(node) {
return node.tagName === 'SCRIPT';
}
function nodeScriptClone(node){
var script = document.createElement("script");
script.text = node.innerHTML;
for( var i = node.attributes.length-1; i >= 0; i-- ) {
script.setAttribute( node.attributes[i].name, node.attributes[i].value );
}
return script;
}Chamada de exemplo:
nodeScriptReplace(document.getElementsByTagName("body")[0]);Você pode criar um script e injetar o conteúdo.
var g = document.createElement('script');
var s = document.getElementsByTagName('script')[0];
g.text = "alert(\"hi\");"
s.parentNode.insertBefore(g, s);Isso funciona em todos os navegadores :)
document.documentElementvez disso.
<script> var g = document.createElement('script'); var s = document.getElementsByTagName('script')[0]; //reference this script g.text = "alert(\"hi\");" s.parentNode.insertBefore(g, s); </script>
<script>elementos. Por exemplo, <img onerror="..." src="#">e <body onload="...">. Se você quiser ser técnico, isso não funcionará em documentos não HTML / SVG, devido ao espaço para nome inexplicado.
Eu usei esse 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 divEu tive esse problema com o innerHTML, tive que anexar um script Hotjar à tag "head" do meu aplicativo Reactjs e ele teria que ser executado logo após o acréscimo.
Uma das boas soluções para importação dinâmica de Nó para a tag "head" é o módulo React-helment .
Além disso, há uma solução útil para o problema proposto:
Nenhuma tag de script no innerHTML!
Acontece que o HTML5 não permite que tags de script sejam adicionadas dinamicamente usando a propriedade innerHTML. Portanto, o seguinte não será executado e não haverá alerta dizendo Olá, mundo!
element.innerHTML = "<script>alert('Hello World!')</script>";Isso está documentado na especificação HTML5:
Nota: os elementos de script inseridos usando innerHTML não são executados quando são inseridos.
Mas cuidado, isso não significa que innerHTML esteja a salvo de scripts entre sites. É possível executar JavaScript via innerHTML sem usar tags, conforme ilustrado na página innerHTML do MDN .
Solução: Adicionando scripts dinamicamente
Para adicionar dinamicamente uma tag de script, você precisa criar um novo elemento de script e anexá-lo ao elemento de destino.
Você pode fazer isso para scripts externos:
var newScript = document.createElement("script");
newScript.src = "http://www.example.com/my-script.js";
target.appendChild(newScript);E scripts embutidos:
var newScript = document.createElement("script");
var inlineScript = document.createTextNode("alert('Hello World!');");
newScript.appendChild(inlineScript);
target.appendChild(newScript);Para quem ainda tentando fazer isso, não, você não pode injetar um script usando innerHTML, mas é possível carregar uma string em uma marca de script usando um Blobe URL.createObjectURL.
Eu criei um exemplo que permite executar uma string como um script e obter as 'exportações' do script retornadas por meio de uma promessa:
function loadScript(scriptContent, moduleId) {
// create the script tag
var scriptElement = document.createElement('SCRIPT');
// create a promise which will resolve to the script's 'exports'
// (i.e., the value returned by the script)
var promise = new Promise(function(resolve) {
scriptElement.onload = function() {
var exports = window["__loadScript_exports_" + moduleId];
delete window["__loadScript_exports_" + moduleId];
resolve(exports);
}
});
// wrap the script contents to expose exports through a special property
// the promise will access the exports this way
var wrappedScriptContent =
"(function() { window['__loadScript_exports_" + moduleId + "'] = " +
scriptContent + "})()";
// create a blob from the wrapped script content
var scriptBlob = new Blob([wrappedScriptContent], {type: 'text/javascript'});
// set the id attribute
scriptElement.id = "__loadScript_module_" + moduleId;
// set the src attribute to the blob's object url
// (this is the part that makes it work)
scriptElement.src = URL.createObjectURL(scriptBlob);
// append the script element
document.body.appendChild(scriptElement);
// return the promise, which will resolve to the script's exports
return promise;
}
...
function doTheThing() {
// no evals
loadScript('5 + 5').then(function(exports) {
// should log 10
console.log(exports)
});
}Eu simplifiquei isso da minha implementação real, então não há promessas de que não haja nenhum bug nela. Mas o princípio funciona.
Se você não se importa em recuperar qualquer valor após a execução do script, é ainda mais fácil; apenas deixar de fora os Promisee onloadpedaços. Você nem precisa quebrar o script ou criar a window.__load_script_exports_propriedade global .
Aqui está uma função recursiva para definir o innerHTML de um elemento que eu uso em nosso servidor de anúncios:
// o: container to set the innerHTML
// html: html text to set.
// clear: if true, the container is cleared first (children removed)
function setHTML(o, html, clear) {
if (clear) o.innerHTML = "";
// Generate a parseable object with the html:
var dv = document.createElement("div");
dv.innerHTML = html;
// Handle edge case where innerHTML contains no tags, just text:
if (dv.children.length===0){ o.innerHTML = html; return; }
for (var i = 0; i < dv.children.length; i++) {
var c = dv.children[i];
// n: new node with the same type as c
var n = document.createElement(c.nodeName);
// copy all attributes from c to n
for (var j = 0; j < c.attributes.length; j++)
n.setAttribute(c.attributes[j].nodeName, c.attributes[j].nodeValue);
// If current node is a leaf, just copy the appropriate property (text or innerHTML)
if (c.children.length == 0)
{
switch (c.nodeName)
{
case "SCRIPT":
if (c.text) n.text = c.text;
break;
default:
if (c.innerHTML) n.innerHTML = c.innerHTML;
break;
}
}
// If current node has sub nodes, call itself recursively:
else setHTML(n, c.innerHTML, false);
o.appendChild(n);
}
}Você pode ver a demonstração aqui .
Aqui, uma solução que não usa evale funciona com scripts , scripts vinculados e também com módulos .
A função aceita 3 parâmetros:
function insertHTML(html, dest, append=false){
// if no append is requested, clear the target element
if(!append) dest.innerHTML = '';
// create a temporary container and insert provided HTML code
let container = document.createElement('div');
container.innerHTML = html;
// cache a reference to all the scripts in the container
let scripts = container.querySelectorAll('script');
// get all child elements and clone them in the target element
let nodes = container.childNodes;
for( let i=0; i< nodes.length; i++) dest.appendChild( nodes[i].cloneNode(true) );
// force the found scripts to execute...
for( let i=0; i< scripts.length; i++){
let script = document.createElement('script');
script.type = scripts[i].type || 'text/javascript';
if( scripts[i].hasAttribute('src') ) script.src = scripts[i].src;
script.innerHTML = scripts[i].innerHTML;
document.head.appendChild(script);
document.head.removeChild(script);
}
// done!
return true;
}eval('console.log(this)')e você verá a mais óbvia
eval('let b=100').. e tente acessar bde fora do eval .... boa sorte com ele, você precisará dele
Krasimir Tsonev tem uma ótima solução que supera todos os problemas. Seu método não precisa usar eval; portanto, não existem problemas de desempenho nem de segurança. Ele permite que você defina a string innerHTML que contenha html com js e traduza-a imediatamente para um elemento DOM, além de executar as partes js existentes no código. curto, simples e funciona exatamente como você deseja.
Aproveite sua solução:
http://krasimirtsonev.com/blog/article/Convert-HTML-string-to-DOM-element
Anotações importantes:
Use em $(parent).html(code)vez deparent.innerHTML = code .
O seguinte também corrige scripts que usam document.writee scripts carregados via srcatributo. Infelizmente, mesmo isso não funciona com os scripts do Google AdSense.
var oldDocumentWrite = document.write;
var oldDocumentWriteln = document.writeln;
try {
document.write = function(code) {
$(parent).append(code);
}
document.writeln = function(code) {
document.write(code + "<br/>");
}
$(parent).html(html);
} finally {
$(window).load(function() {
document.write = oldDocumentWrite
document.writeln = oldDocumentWriteln
})
}Tente usar o template e document.importNode. Aqui está um exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<h1 id="hello_world">Sample</h1>
<script type="text/javascript">
var div = document.createElement("div");
var t = document.createElement('template');
t.innerHTML = "Check Console tab for javascript output: Hello world!!!<br/><script type='text/javascript' >console.log('Hello world!!!');<\/script>";
for (var i=0; i < t.content.childNodes.length; i++){
var node = document.importNode(t.content.childNodes[i], true);
div.appendChild(node);
}
document.body.appendChild(div);
</script>
</body>
</html>Você também pode quebrar o seu <script>assim e ele será executado:
<your target node>.innerHTML = '<iframe srcdoc="<script>alert(top.document.title);</script>"></iframe>';Observe: O escopo interno srcdocrefere-se ao iframe, portanto, você deve usar topcomo no exemplo acima para acessar o documento pai.
Sim, você pode, mas precisa fazer isso fora do DOM e a ordem deve estar correta.
var scr = '<scr'+'ipt>alert("foo")</scr'+'ipt>';
window.onload = function(){
var n = document.createElement("div");
n.innerHTML = scr;
document.body.appendChild(n);
}... irá alertar 'foo'. Isso não vai funcionar:
document.getElementById("myDiv").innerHTML = scr;E mesmo isso não funcionará, porque o nó é inserido primeiro:
var scr = '<scr'+'ipt>alert("foo")</scr'+'ipt>';
window.onload = function(){
var n = document.createElement("div");
document.body.appendChild(n);
n.innerHTML = scr;
}Minha solução para esse problema é definir um Mutation Observer para detectar <script></script>nós e substituí-lo por um novo <script></script>nó com o mesmo src. Por exemplo:
let parentNode = /* node to observe */ void 0
let observer = new MutationObserver(mutations=>{
mutations.map(mutation=>{
Array.from(mutation.addedNodes).map(node=>{
if ( node.parentNode == parentNode ) {
let scripts = node.getElementsByTagName('script')
Array.from(scripts).map(script=>{
let src = script.src
script = document.createElement('script')
script.src = src
return script
})
}
})
})
})
observer.observe(document.body, {childList: true, subtree: true});A menção de Gabriel Garcia aos MutationObservers está no caminho certo, mas não funcionou muito bem para mim. Não tenho certeza se isso foi devido a uma peculiaridade do navegador ou devido a um erro do meu lado, mas a versão que acabou funcionando para mim foi a seguinte:
document.addEventListener("DOMContentLoaded", function(event) {
var observer = new MutationObserver(mutations=>{
mutations.map(mutation=>{
Array.from(mutation.addedNodes).map(node=>{
if (node.tagName === "SCRIPT") {
var s = document.createElement("script");
s.text=node.text;
if (typeof(node.parentElement.added) === 'undefined')
node.parentElement.added = [];
node.parentElement.added[node.parentElement.added.length] = s;
node.parentElement.removeChild(node);
document.head.appendChild(s);
}
})
})
})
observer.observe(document.getElementById("element_to_watch"), {childList: true, subtree: true,attributes: false});
};Obviamente, você deve substituir element_to_watchpelo nome do elemento que está sendo modificado.
node.parentElement.addedé usado para armazenar as tags de script adicionadas document.head. Na função usada para carregar a página externa, você pode usar algo como o seguinte para remover as tags de script não mais relevantes:
function freeScripts(node){
if (node === null)
return;
if (typeof(node.added) === 'object') {
for (var script in node.added) {
document.head.removeChild(node.added[script]);
}
node.added = {};
}
for (var child in node.children) {
freeScripts(node.children[child]);
}
}E um exemplo do início de uma função de carregamento:
function load(url, id, replace) {
if (document.getElementById(id) === null) {
console.error("Element of ID "+id + " does not exist!");
return;
}
freeScripts(document.getElementById(id));
var xhttp = new XMLHttpRequest();
// proceed to load in the page and modify innerHTML
}MutationObservercada vez que um elemento é anexado ao documento, certo? Btw, eu me pergunto por que você diz que meu código não é funcional.
Para mim, a melhor maneira é inserir o novo conteúdo HTML através do innerHtml e, em seguida, usar
setTimeout(() => {
var script_el = document.createElement("script")
script_el.src = 'script-to-add.js'
document.body.appendChild(script_el)
}, 500)O setTimeout não é necessário, mas funciona melhor. Isso funcionou para mim.
Etiqueta Executar (Java Script) do innerHTML
Substitua seu elemento de script por div com um atributo de classe class = "javascript" e feche-o com </div>
Não altere o conteúdo que você deseja executar (anteriormente estava na tag de script e agora está na tag div)
Adicione um estilo à sua página ...
<style type="text/css"> .javascript { display: none; } </style>
Agora execute eval usando jquery (o jquery js já deve estar incluído)
$('.javascript').each(function() {
eval($(this).text());
});`Você pode explorar mais aqui , no meu blog.