Traté de cargar algunos scripts en una página usando innerHTMLun <div>. Parece que el script se carga en el DOM, pero nunca se ejecuta (al menos en Firefox y Chrome). ¿Hay alguna forma de ejecutar scripts al insertarlos innerHTML?
Código de muestra:
<!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>Respuestas:
Debe usar eval () para ejecutar cualquier código de script que haya insertado como texto DOM.
MooTools lo hará por usted automáticamente, y estoy seguro de que jQuery también lo hará (dependiendo de la versión. JQuery versión 1.6+ utiliza eval). Esto ahorra mucha molestia de analizar <script>etiquetas y escapar de su contenido, así como un montón de otras "trampas".
En general, si va a eval()hacerlo usted mismo, desea crear / enviar el código del script sin ningún marcado HTML como <script>, ya que estos no lo harán eval()correctamente.
<script>etiqueta innerHTMLpuede ser corto, pero no funciona. Todo es solo texto plano hasta que se ejecuta eval(). Y lamentablemente, eval()no analiza las etiquetas HTML, por lo que terminas con una cadena de problemas.
Aquí hay una solución muy interesante para su problema: http://24ways.org/2005/have-your-dom-and-script-it-too
Entonces use esto en lugar de las etiquetas de script:
<img src="empty.gif" onload="alert('test');this.parentNode.removeChild(this);" />
onloadatributo. Además, esto requiere que exista un archivo adicional y que se cargue. La solución de momo es un compromiso menor.
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">(esto no hará una solicitud de red) En realidad ... NO necesita una imagen, hacer referencia a una imagen no existente y en lugar de onloadusaronerror (pero esto hará una solicitud de red)
Aquí hay un método que reemplaza recursivamente todos los scripts por ejecutables:
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;
}Llamada de ejemplo:
nodeScriptReplace(document.getElementsByTagName("body")[0]);Puede crear un script y luego inyectar el contenido.
var g = document.createElement('script');
var s = document.getElementsByTagName('script')[0];
g.text = "alert(\"hi\");"
s.parentNode.insertBefore(g, s);Esto funciona en todos los navegadores :)
document.documentElementlugar.
<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 ejemplo <img onerror="..." src="#">y <body onload="...">. Si desea ser técnico, esto no funcionará en documentos que no sean HTML / SVG debido al espacio de nombres no explícito.
Usé este código, está funcionando bien
var arr = MyDiv.getElementsByTagName('script')
for (var n = 0; n < arr.length; n++)
eval(arr[n].innerHTML)//run script inside divTuve este problema con innerHTML, tuve que agregar un script Hotjar a la etiqueta "head" de mi aplicación Reactjs y tendría que ejecutarse justo después de agregarlo.
Una de las buenas soluciones para la importación dinámica de nodos en la etiqueta "head" es el módulo React-helment .
Además, hay una solución útil para el problema propuesto:
¡No hay etiquetas de script en innerHTML!
Resulta que HTML5 no permite que las etiquetas de script se agreguen dinámicamente usando la propiedad innerHTML. Por lo tanto, lo siguiente no se ejecutará y no habrá ninguna alerta que diga ¡Hola mundo!
element.innerHTML = "<script>alert('Hello World!')</script>";Esto está documentado en la especificación HTML5:
Nota: los elementos de script insertados con innerHTML no se ejecutan cuando se insertan.
Pero cuidado, esto no significa que innerHTML esté a salvo de secuencias de comandos entre sitios. Es posible ejecutar JavaScript a través de innerHTML sin usar etiquetas como se ilustra en la página innerHTML de MDN .
Solución: agregar scripts dinámicamente
Para agregar dinámicamente una etiqueta de secuencia de comandos, debe crear un nuevo elemento de secuencia de comandos y agregarlo al elemento de destino.
Puede hacer esto para scripts externos:
var newScript = document.createElement("script");
newScript.src = "http://www.example.com/my-script.js";
target.appendChild(newScript);Y guiones en línea:
var newScript = document.createElement("script");
var inlineScript = document.createTextNode("alert('Hello World!');");
newScript.appendChild(inlineScript);
target.appendChild(newScript);Para cualquiera que todavía intente hacer esto, no, no puede inyectar un script usando innerHTML, pero es posible cargar una cadena en una etiqueta de script usando un Bloby URL.createObjectURL.
He creado un ejemplo que le permite ejecutar una cadena como secuencia de comandos y obtener las 'exportaciones' de la secuencia de comandos a través de una promesa:
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)
});
}He simplificado esto desde mi implementación real, por lo que no prometo que no haya errores. Pero el principio funciona.
Si no le importa recuperar ningún valor después de que se ejecute el script, es aún más fácil; acaba de dejar de lado las Promisey los onloadbits. Ni siquiera necesita envolver el script o crear la window.__load_script_exports_propiedad global .
Aquí hay una función recursiva para establecer el innerHTML de un elemento que uso en nuestro servidor de anuncios:
// 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);
}
}Puedes ver la demo aquí .
Aquí una solución que no utiliza eval, y funciona con scripts , scripts vinculados , así como con módulos .
La función acepta 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)')y verá la más obvia
eval('let b=100')... y luego intente acceder bdesde fuera de la evaluación ... buena suerte con eso, lo va a necesitar
Krasimir Tsonev tiene una gran solución que supera todos los problemas. Su método no necesita usar eval, por lo que no existen problemas de rendimiento ni seguridad. Le permite configurar la cadena innerHTML que contiene html con js y traducirla inmediatamente a un elemento DOM mientras también ejecuta las partes js que existen a lo largo del código. corto, simple y funciona exactamente como quieras.
Disfruta su solución:
http://krasimirtsonev.com/blog/article/Convert-HTML-string-to-DOM-element
Notas importantes:
Usar en $(parent).html(code)lugar de parent.innerHTML = code.
Lo siguiente también corrige los scripts que usan document.writey los scripts cargados a través de srcatributos. Desafortunadamente, incluso esto no funciona con los scripts de 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
})
}Intente usar template y document.importNode. Aquí hay un ejemplo:
<!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>También puede envolverlo <script>así y se ejecutará:
<your target node>.innerHTML = '<iframe srcdoc="<script>alert(top.document.title);</script>"></iframe>';Tenga en cuenta: el alcance interno se srcdocrefiere al iframe, por lo que debe usar topcomo en el ejemplo anterior para acceder al documento principal.
Sí, puede hacerlo, pero debe hacerlo fuera del DOM y el orden debe ser correcto.
var scr = '<scr'+'ipt>alert("foo")</scr'+'ipt>';
window.onload = function(){
var n = document.createElement("div");
n.innerHTML = scr;
document.body.appendChild(n);
}... alertará a 'foo'. Esto no funcionará:
document.getElementById("myDiv").innerHTML = scr;E incluso esto no funcionará, porque el nodo se inserta primero:
var scr = '<scr'+'ipt>alert("foo")</scr'+'ipt>';
window.onload = function(){
var n = document.createElement("div");
document.body.appendChild(n);
n.innerHTML = scr;
}Mi solución para este problema es configurar un Observador de mutaciones para detectar <script></script>nodos y luego reemplazarlo por un nuevo <script></script>nodo con el mismo src. Por ejemplo:
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});La mención de Gabriel Garcia de MutationObservers está en el camino correcto, pero no funcionó para mí. No estoy seguro de si fue por una peculiaridad del navegador o por un error de mi parte, pero la versión que terminó funcionando para mí fue la siguiente:
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});
};Por supuesto, debe reemplazarlo element_to_watchcon el nombre del elemento que se está modificando.
node.parentElement.addedse usa para almacenar las etiquetas de script que se agregan a document.head. En la función utilizada para cargar la página externa, puede usar algo como lo siguiente para eliminar las etiquetas de script que ya no son 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]);
}
}Y un ejemplo del comienzo de una función de carga:
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 se agrega un elemento al documento, ¿verdad? Por cierto, me pregunto por qué dices que mi código no es funcional.
Para mí, la mejor manera es insertar el nuevo contenido HTML a través de innerHtml y luego usar
setTimeout(() => {
var script_el = document.createElement("script")
script_el.src = 'script-to-add.js'
document.body.appendChild(script_el)
}, 500)El setTimeout no es obligatorio pero funciona mejor. Esto funcionó para mí.
Ejecutar (Java Script) etiqueta de innerHTML
Reemplace su elemento de script con div que tenga un atributo de clase class = "javascript" y ciérrelo con </div>
No cambie el contenido que desea ejecutar (anteriormente estaba en la etiqueta del script y ahora está en la etiqueta div)
Agregue un estilo en su página ...
<style type="text/css"> .javascript { display: none; } </style>
Ahora ejecute eval usando jquery (Jquery js ya debería estar incluido)
$('.javascript').each(function() {
eval($(this).text());
});`Puedes explorar más aquí , en mi blog.