Foros del web, para los que viven de bits

MaBoRaK · 06/08/07, 14:23:36

loading.....................

En vista de que muchos aun se preguntan como interpretar javascript que viene con ajax

Cita:

Texto que tiene javascript
<script>
alert("aqui mismo");
</script>
y mas

Si reciben eso y lo pegan en un Div o cualquier otro elemento, el javascript que tiene dentro no se ejecutará

Código PHP:


			
        myDiv.innerHTML=ajax.responseText;

Bueno..... todo eso ya es conocido.

Manos a la obra
interpretadorAjax.js

Código PHP:


			
        var tagScript = '(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)';

        /**

        * Eval script fragment

        * @return String

        */

        String.prototype.evalScript = function()

        {

                return (this.match(new RegExp(tagScript, 'img')) || []).evalScript();

        };

        /**

        * strip script fragment

        * @return String

        */

        String.prototype.stripScript = function()

        {

                return this.replace(new RegExp(tagScript, 'img'), '');

        };

        /**

        * extract script fragment

        * @return String

        */

        String.prototype.extractScript = function()

        {

                var matchAll = new RegExp(tagScript, 'img');

                return (this.match(matchAll) || []);

        };

        /**

        * Eval scripts

        * @return String

        */

        Array.prototype.evalScript = function(extracted)

        {

                var s=this.map(function(sr){

                         var sc=(sr.match(new RegExp(tagScript, 'im')) || ['', ''])[1];

                         if(window.execScript){

                              window.execScript(sc);

                         }

                        else

                       {

                           window.setTimeout(sc,0);

                        }

                });

                return true;

        };

        /**

        * Map array elements

        * @param {Function} fun

        * @return Function

        */

        Array.prototype.map = function(fun)

        {

                if(typeof fun!=="function"){return false;}

                var i = 0, l = this.length;

                for(i=0;i<l;i++)

                {

                        fun(this[i]);

                }

                return true;

        };

Forma de uso:

Incluir el archivo interpretadorAjax.js en su Header.
Interpretando.
1. Interprete normal
  Código:
```
Texto blabla
<script type='text/javscript'>alert('algo');</script>
Otro texto blabla
```
  Código PHP:
  
  var scs=myAjax.responseText.extractScript(); //capturamos los scripts myDivUoTroLugar.innerHTML=myAjax.responseText.stripScript(); //eliminamos los scripts... ya son innecesarios scs.evalScript(); //ahora si, comenzamos a interpretar todo
2. Ahora bien, para interpretar archivos javascript
  Código:
```
<script type='text/javascript'>alert('algo');</script>
Texto blabla
<script type='text/javascript' src="algo.js"></script>
Otro texto blabla
```
  Se debe hacer.
  
  Código PHP:
  
  var scs=myAjax.responseText.extractScript(); //capturamos los scripts myDivUoTroLugar.innerHTML=myAjax.responseText scs.evalScript(); //ahora si, comenzamos a interpretar todo

En teoría es mejor usar la opción b.

Espero les sirva y es similar al eval de prototype pero yo lo pensé antes...

connection closed.

calvin_naranjo · 07/08/07, 16:50:03

Hola, interesante solución con prototype, pero leí como en tres sitios que no era recomendable usar eval para este tipo de procesos... que te dice tu experiencia al respecto....??
Gracias por la solución..

MaBoRaK · 07/08/07, 17:48:57

loading.............

Es la forma mas sencilla que le veo a interpretar texto plano como javascript... e igual no le veo el peligro.... que de malo tendria hacer un eval? si con un par de extensiones igual puedo inyectar codigo javascript en cualquier página :S

connection closed.

MaBoRaK · 07/08/07, 17:50:19

loading...........

Otra forma mas tediosa sería crear tags script por cada script encontrado en extracScript. con algun identificador para evitar doble parseo.

connection closed.

vb2005 · 07/08/07, 18:37:04

gracias, una pregunta porque siempre pones loading...........?

MaBoRaK · 07/08/07, 23:44:47

loading.....................

Bueno 7 años atras andaba tras el hacking... y de ahí que siempre firmaba de esa forma porque mis exploits las iniciaba así... para conectar a un target y tambien para finalizarlo..........y se me quedó jeje 8)

connection closed.

Panino5001 · 08/08/07, 07:17:38

Hola MaBoRak, me gusta más esta manera:

Código PHP:


			
<script>
function SetContainerHTML(id_contenedor,responseText)
{
mydiv = document.getElementById(id_contenedor);
mydiv.innerHTML = responseText;
var elementos = mydiv.getElementsByTagName('script');
for(i=0;i<elementos.length;i++) {
var elemento = elementos[i];
nuevoScript = document.createElement('script');
nuevoScript.text = elemento.innerHTML;
nuevoScript.type = 'text/javascript';
if(elemento.src!=null && elemento.src.length>0)
{nuevoScript.src = elemento.src;}
elemento.parentNode.replaceChild(nuevoScript,elemento);
}
}

</script>

MaBoRaK · 08/08/07, 07:36:57

loading...........

Sip, muy buena, pero hay algo ahi.... si haces la misma peticion como 10 veces, crearas 10 veces los mismos elementos SCRIPT.

Mientras que con este eval, simplemente INTERPRETAS y no se queda en memoria el elemento SCRIPT

connection closed.

Panino5001 · 08/08/07, 07:42:54

Si, es cierto, pero es fácilmente solucionable agregándole a cada script generado un id del tipo 'prefix'+i, y agregando un condicional como este: if(document.getElementById('prefix'+i)), y un removeChild si se cumple el if, no?

Panino5001 · 08/08/07, 07:47:12

Entonces quedaría así:

Código PHP:


			
<script>

function SetContainerHTML(id_contenedor,responseText)

{

mydiv = document.getElementById(id_contenedor);

mydiv.innerHTML = responseText;

var elementos = mydiv.getElementsByTagName('script');

for(i=0;i<elementos.length;i++) {

old=document.getElementById('prefix'+i);

if(old)mydiv.removeChild(old)

var elemento = elementos[i];

nuevoScript = document.createElement('script');

nuevoScript.text = elemento.innerHTML;

nuevoScript.type = 'text/javascript';

nuevoScript.id = 'prefix'+i;

if(elemento.src!=null && elemento.src.length>0)

{nuevoScript.src = elemento.src;}

elemento.parentNode.replaceChild(nuevoScript,elemento);

}

}



</script>

Panino5001 · 08/08/07, 08:21:05

Bueno, esta sería la prueba:

Código PHP:


			
<script>

function SetContainerHTML(id_contenedor,responseText)

{

mydiv = document.getElementById(id_contenedor);

mydiv.innerHTML = responseText;

var elementos = mydiv.getElementsByTagName('script');

for(i=0;i<elementos.length;i++) {

old=document.getElementById('prefix'+i);

if(old)mydiv.removeChild(old)

var elemento = elementos[i];

nuevoScript = document.createElement('script');

nuevoScript.text = elemento.innerHTML;

nuevoScript.type = 'text/javascript';

nuevoScript.id = 'prefix'+i;

if(elemento.src!=null && elemento.src.length>0)

{nuevoScript.src = elemento.src;}

elemento.parentNode.replaceChild(nuevoScript,elemento);

}

}

txt='hola<scr'+'ipt>alert("hola");alert(document.getElementsByTagName("script").length);</sc'+'ript>';

</script>  

<div id="pepe" onclick="SetContainerHTML('pepe',txt)">bla</div>

Panino5001 · 08/08/07, 08:31:44

Aunque lo curioso es que compruebo también que no es necesario el if. En cada llamada a la función se elimina el elemento script anterior, ya que sige apareciendo 2 como resultado:

Código PHP:


			
<html>

<head>

<script>

function SetContainerHTML(id_contenedor,responseText)

{

mydiv = document.getElementById(id_contenedor);

mydiv.innerHTML = responseText;

var elementos = mydiv.getElementsByTagName('script');

for(i=0;i<elementos.length;i++) {

old=document.getElementById('prefix'+i);

//if(old)mydiv.removeChild(old)

var elemento = elementos[i];

nuevoScript = document.createElement('script');

nuevoScript.text = elemento.innerHTML;

nuevoScript.type = 'text/javascript';

//nuevoScript.id = 'prefix'+i;

if(elemento.src!=null && elemento.src.length>0)

{nuevoScript.src = elemento.src;}

elemento.parentNode.replaceChild(nuevoScript,elemento);

}

}

txt='hola<scr'+'ipt>alert("hola");alert(document.getElementsByTagName("script").length);</sc'+'ript>';

</script>

</head> 

<body>

<div id="pepe" onClick="SetContainerHTML('pepe',txt)">bla</div>

</body>

</html>

Siempre devuelve 2

MaBoRaK · 08/08/07, 10:32:22

loading.............

Ok te lo complico mas :p
Tienes 3 procesos AJAX.

Cargas 2 scripts
cargas 7 scripts
cargas nada

como es ajax... se dará el caso de que en la opcion 2 ahora ya no se cargan 7 scripts, sinó 3 y son DISTINTOS a los que registraste con prefix.

Otro ejemplo: Tienes un proceso ajax que en su primera ejecucion te crea 3 scripts... en el segundo llamado ejecuta 2 scripts que dependen de los 3 primeros creados..... es como decir, yo dejó aca sctos scripts por si alguien o YO MISMO las vaya a usar adelante.

connection closed.

Panino5001 · 08/08/07, 11:08:31

Sí, pero la cosa es que no se multilplican en cada consulta, probá el ejemplo que puse, donde comenté el condicional agregado, y vas a ver que en cada consulta el número de tags script no se incrementa sino que permanece constante.
Lo que sucede, es que usamos replaceChild sobre el mismo contenedor, luego de modificar su contenido con innerHTML, entonces desaparecen en cada llamada los tags script anteriores.

MaBoRaK · 08/08/07, 13:26:05

loading............

Ahora el problema no son la cantidad de scripts... sinó el reemplazo que haces de ellas... no tienes control de QUE SCRIPTS REEMPLAZA y cuales no.

connection closed.

MaBoRaK · 09/08/07, 20:57:46

loading.............

No se si sea bug pero... he visto que si haces eval() dentro de una funcion, las variables no son globales... sino locales GRR!!!!!!!!!!!!! ya lo solucionaré

connection closed.

MaBoRaK · 09/08/07, 21:25:09

loading..........

SOLUCIONADO:
simplemente hay que cambiar
eval()
por
setTimeout(cadenaAevaluar,0);

connection closed.