infinito - ¿Cómo se ejecuta un bloque de JavaScript cargado dinámicamente?
javascript caracteristicas (7)
Estoy trabajando en una página web donde estoy haciendo una llamada AJAX que devuelve un pedazo de HTML como:
<div>
<!-- some html -->
<script type="text/javascript">
/** some javascript */
</script>
</div>
Estoy insertando todo en el DOM, pero el JavaScript no se está ejecutando. ¿Hay alguna forma de ejecutarlo?
Algunos detalles: no puedo controlar lo que está en el bloque de scripts (así que no puedo cambiarlo a una función que podría llamarse), solo necesito que se ejecute todo el bloque. No puedo llamar a eval en la respuesta porque el JavaScript está dentro de un bloque más grande de HTML. Podría hacer algún tipo de expresión regular para separar el JavaScript y luego llamar a eval, pero eso es bastante asqueroso. Alguien sabe una mejor manera?
A continuación se muestra un enfoque un poco diferente que utiliza el hecho de que si la etiqueta contiene tipo = "texto / xml" JavaScript no se ejecutará en su interior:
function preventJS(html) {
return html.replace(/<script(?=(/s|>))/i, ''<script type="text/xml" '');
}
Puede leer más aquí - JavaScript: Cómo evitar la ejecución de JavaScript dentro de un html que se agrega al DOM . Si funciona para usted, deje aquí un comentario con información sobre qué navegador y qué versión ha utilizado.
El mejor método sería identificar y evaluar los contenidos del bloque de scripts directamente a través del DOM.
Sin embargo, sería cuidadoso ... si está implementando esto para superar una limitación de una llamada fuera del sitio, está abriendo un agujero de seguridad.
Cualquier cosa que implemente podría ser explotada para XSS.
El script agregado al establecer la propiedad innerHTML de un elemento no se ejecuta. Intenta crear un nuevo div, configurando su innerHTML, y luego agrega este nuevo div al DOM. Por ejemplo:
<html> <head> <script type=''text/javascript''> function addScript() { var str = "<script>alert(''i am here'');<//script>"; var newdiv = document.createElement(''div''); newdiv.innerHTML = str; document.getElementById(''target'').appendChild(newdiv); } </script> </head> <body> <input type="button" value="add script" onclick="addScript()"/> <div>hello world</div> <div id="target"></div> </body> </html>
No tiene que usar expresiones regulares si está usando la respuesta para llenar un div o algo. Puede usar getElementsByTagName.
div.innerHTML = response;
var scripts = div.getElementsByTagName(''script'');
for (var ix = 0; ix < scripts.length; ix++) {
eval(scripts[ix].text);
}
Puede usar una de las bibliotecas populares de Ajax que lo hacen de forma nativa. Me gusta Prototype . Solo puede agregar evalScripts: verdadero como parte de su llamada Ajax y ocurre de manera automágica.
Si bien la respuesta aceptada de @Ed. no funciona en las versiones actuales de los navegadores Firefox, Google Chrome o Safari. Pude adaptar su ejemplo para invocar scripts añadidos dinámicamente.
Los cambios necesarios son solo en la forma en que los scripts se agregan a DOM. En lugar de agregarlo como innerHTML el truco consistía en crear un nuevo elemento de guión y agregar el contenido del guión real como innerHTML al elemento creado y, luego, agregar el elemento del guión al objetivo real.
<html>
<head>
<script type=''text/javascript''>
function addScript()
{
var newdiv = document.createElement(''div'');
var p = document.createElement(''p'');
p.innerHTML = "Dynamically added text";
newdiv.appendChild(p);
var script = document.createElement(''script'');
script.innerHTML = "alert(''i am here'');";
newdiv.appendChild(script);
document.getElementById(''target'').appendChild(newdiv);
}
</script>
</head>
<body>
<input type="button" value="add script" onclick="addScript()"/>
<div>hello world</div>
<div id="target"></div>
</body>
</html>
Esto funciona para mí en Firefox 42, Google Chrome 48 y Safari 9.0.3
Una alternativa es no solo descargar el retorno de la llamada Ajax al DOM usando InnerHTML.
Puede insertar cada nodo dinámicamente y luego se ejecutará el script.
De lo contrario, el navegador simplemente supone que está insertando un nodo de texto e ignora los scripts.
Usar Eval es bastante malo, porque requiere que se active otra instancia de la VM de Javascript y JIT la cadena pasada.