Cambiar tipo de nodo

_cronos2 · #1 (**permalink**) 26/05/2011, 13:56

Estoy intentando hacer que un comentario HTML se convierta en código HTML, pero no se me ocurre nada

Es muy fácil usando innerHTML, p. ej:

Código Javascript:

Ver originalvar comment = document.createComment('<b>Esto es un comentario que será HTML</b>');
document.body.appendChild(comment);
document.body.innerHTML += comment.nodeValue;
document.body.removeChild(comment); // También se puede dejar sin borrar

o de otras maneras también usando innerHTML, sin embargo estaba pensando en algo más DOM.
Se me ocurrió cambiar directamente el nodeType, pero me imaginé de antemano que no iba a funcionar

Así que apelo a la gran sabiduría de estos foros para comprobar si existe alguna manera de hacer esto vía DOM.
Saludos y gracias (:

Aijoona · #2 (**permalink**) 26/05/2011, 14:11

Por lo pronto el atributo nodeType es readonly:

Cita:

nodeType of type unsigned short, readonly
A code representing the type of the underlying object, as defined above.

Link: http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-111237558

Dudo que se pueda modificar sin caer en algun tipo de reemplazo como propones.

_cronos2 · #3 (**permalink**) 26/05/2011, 14:16

Cita:

Iniciado por Aijoona

Por lo pronto el atributo nodeType es readonly:

Sí, me sonaba haberlo leído, pero por si acaso probé

De todas maneras sigo mirando a ver qué puedo hacer.
Saludos y gracias por responder :D

_cronos2 · #4 (**permalink**) 29/05/2011, 06:58

Pues igual no es tan fácil con innerHTML como yo pensaba. Resulta que en el ejemplo que puse sí funciona (aunque según Chrome, no puedo usar removeChild para borrar el comentario). Sin embargo, si tengo algo como esto, que es a lo que va encaminado esto de "transformar nodos":

Código Javascript:

Ver originalvar html = '<script src="script.js" type="application/javascript"></script>';
document.body.innerHTML += '<!--' + html + '-->';
document.body.innerHTML = document.body.innerHTML.replace('<!--' + html + '-->', html);

Cambia el innerHTML, pero el script no se carga

¿Qué puedo hacer?
Saludos (:

Panino5001 · #5 (**permalink**) 29/05/2011, 09:09

Pasa lo mismo que cuando se quiere evaluar un script proveniente de un responseText: hay que "evaluarlo" para que sea funcional (si no es sólo texto, incluso en explorer getElementsByTagName('script').length sería igual a 0 en ese caso):

Código:

String.prototype.evalScripts=function(){
    var pat=/<script[^>]*>([\S\s]*?)<\/script[^>]*>/ig;
    var pat2=/\bsrc=[^>\s]+\b/g;
    var elementos = this.match(pat) || [];
    for(i=0;i<elementos.length;i++) {
        var nuevoScript = document.createElement('script');
        nuevoScript.type = 'text/javascript';
        var tienesrc=elementos[i].match(pat2) || [];
        if(tienesrc.length){
            nuevoScript.src=tienesrc[0].split("'").join('').split('"').join('').split('src=').join('').split(' ').join('');
        }else{
            var elemento = elementos[i].replace(pat,'$1');
            nuevoScript.text = elemento;
        }
        document.getElementsByTagName('body')[0].appendChild(nuevoScript);
    }
    return this.replace(pat,'');
}

Por otro lado, lo normal es que el intérprete falle al encontrar las cadenas '<script>' o </script>, por lo que lo normal es cortarlas. Por ejemplo: '<scr'+'ipt>'

_cronos2 · #6 (**permalink**) 29/05/2011, 10:17

Hola @Panino

He tratado de adaptar la función:

Código Javascript:

Ver originalString.extender({
 'HTML' : function(){
  var str = this.replace(/^\s*([\S\s]+?)\s*$/, '$1');
  var regexps = [
                 /^<?[A-z]+>?$/,
                 /^<([A-z]+)[^>]*>[\s\S]+?(<\/\1>)?$/
                ];
  if(regexps[0].test(str)){
   return document.createElement(str);
  }
  if(regexps[1].test(str)){
   var div = document.createElement('div');
   div.innerHTML = str;
   return div.firstChild;
  }
 }
});
document.body.appendChild(('<scr' + 'ipt src="algo.js" type="application/javascript"></scr' + 'ipt>').HTML());

Y lo añade al body, pero sigue sin cargar el contenido :/
Saludos y gracias :D

Panino5001 · #7 (**permalink**) 29/05/2011, 11:02

Pero eso era para evaluar scripts cuando usabas innerHTML, como mostrabas en tu ejemplo...

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
String.prototype.evalScripts=function(){
    var pat=/<script[^>]*>([\S\s]*?)<\/script[^>]*>/ig;
    var pat2=/\bsrc=[^>\s]+\b/g;
    var elementos = this.match(pat) || [];
    for(i=0;i<elementos.length;i++) {
        var nuevoScript = document.createElement('script');
        nuevoScript.type = 'text/javascript';
        var tienesrc=elementos[i].match(pat2) || [];
        if(tienesrc.length){
            nuevoScript.src=tienesrc[0].split("'").join('').split('"').join('').split('src=').join('').split(' ').join('');
        }else{
            var elemento = elementos[i].replace(pat,'$1');
            nuevoScript.text = elemento;
        }
        document.getElementsByTagName('body')[0].appendChild(nuevoScript);
    }
    return this.replace(pat,'');
}
onload=function(){
	var sc='<scr'+'ipt type="text/javascript">alert("test");</scr'+'ipt>';
	var otraCosa='lo que sea';
	document.body.innerHTML=(sc+otraCosa).evalScripts();
}
</script>

</head>

<body>
</body>
</html>

Si en lugar de esta línea:

Código PHP:

  document.body.innerHTML=(sc+otraCosa).evalScripts();

usás esta otra:

Código PHP:

  document.body.innerHTML=(sc+otraCosa);

no se produce el alert

Otra cosa, estás seguro de esto?: type="application/javascript"

_cronos2 · #8 (**permalink**) 29/05/2011, 12:30

Cita:

Iniciado por Panino5001

Pero eso era para evaluar scripts cuando usabas innerHTML, como mostrabas en tu ejemplo...

Ya, pero en vista de que simplemente no se puede pasar directamente de comentario a código HTML, pensé en crear esta función para parsear HTML y después lo añadía al body, pero sigue sin cargar el contenido.

Cita:

Iniciado por Panino5001

Otra cosa, estás seguro de esto?: type="application/javascript"

Lo dijo no sé quién en el foro, yo también pensé lo mismo pero @ZK me dijo algo así como que era parte de la próxima versión de ECMA y que había que acostumbrarse a usarlo, o eso le entendí yo

zerokilled · #9 (**permalink**) 29/05/2011, 12:38

que tal gente! aclaracion sobre el MimeType de javascript. no recuerdo en cual RFC (request for comment) habia leido que se esta tratando de reemplazar el MimeType text/javascript por application/javascript. el problema es que no todos los navegadores aun tienen soporte para este ultimo. al menos en iexplorer8 no me funciona. no se cual es la ventaja de application/javascript frente a text/javascript, pero opino que seria mas adecuado utilizar text/javascript porque es el mas compatible. la verdad, no creo haber dicho lo contrario, si bien recuerdo habia mencionado una observacion.

algunos temas donde hice alguna mencion del MimeType:
http://www.forosdelweb.com/showthread.php?t=903576
http://www.forosdelweb.com/showthread.php?t=888041

@edit: encontre el RFC, RFC4329. pero notese que data del 2006, lo cual ha habido un gran lapso y aun hoy dia hay navegadores sin soporte. o sera solo las versiones antiguas.

alguien tendra que confirmar si en iexplorer9 o 10 funciona.

_cronos2 · #10 (**permalink**) 29/05/2011, 13:14

Cita:

Iniciado por zerokilled

que tal gente! aclaracion sobre el MimeType de javascript. no recuerdo en cual RFC (request for comment) habia leido que se esta tratando de reemplazar el MimeType text/javascript por application/javascript. el problema es que no todos los navegadores aun tienen soporte para este ultimo. al menos en iexplorer8 no me funciona. no se cual es la ventaja de application/javascript frente a text/javascript, pero opino que seria mas adecuado utilizar text/javascript porque es el mas compatible. la verdad, no creo haber dicho lo contrario, si bien recuerdo habia mencionado una observacion.

algunos temas donde hice alguna mencion del MimeType:
http://www.forosdelweb.com/showthread.php?t=903576
http://www.forosdelweb.com/showthread.php?t=888041

@edit: encontre el RFC, RFC4329. pero notese que data del 2006, lo cual ha habido un gran lapso y aun hoy dia hay navegadores sin soporte. o sera solo las versiones antiguas.

alguien tendra que confirmar si en iexplorer9 o 10 funciona.

Efectivamente, me refería al tema del segundo link

Saludos (:

Panino5001 · #11 (**permalink**) 29/05/2011, 13:18

@zerokilled: gracias, amigo por la aclaración.
@_cronos2: ¿cuál es tu objetivo final? Si es sólo aprender, todo bien. Si en cambio lo que estás haciendo es algo encaminado a alguna forma de templates, por qué mejor no implementar algo como esto?: http://www.alistapart.com/articles/javascript-mvc/

_cronos2 · #12 (**permalink**) 29/05/2011, 14:54

No, no estoy tratando de hacer templates, y tampoco veo qué tiene eso que ver con lo que estoy haciendo, quizás porque lo he leído por encima

Lo siento pero esque ando bastante liado estos días

Lo que estoy tratando de hacer es poder cargar un script en mitad de la página, cuando yo quiera. Había pensado en añadirlos como comentarios HTML, y después parsear el código, pero parece que el asunto se ha ido desviando XD
Así que la cuestión es poder agregar el script al body y que se cargue su contenido.
Saludos (:

Panino5001 · #13 (**permalink**) 29/05/2011, 15:13

Algo como esto?:

Código PHP:

  var include=function(){
    return function(Src){
        var sc=document.createElement('script');
        sc.type='text/javascript';
        sc.src=Src;
        document.getElementsByTagName('body')[0].appendChild(sc);
        sc=null;
    }
}();
include('loquesea.js');

(Podés agregarle un id para removerlo si es necesario)
Aquí hay un ejemplo:

Código PHP:

  <?php 
if(isset($_GET['p'])){ 
    switch($_GET['sel']){ 
        case '1': 
            $ret=array('Final del Juego','Rayuela','El Señor de loas Anillos');
            break; 
        case '2': 
            $ret=array('rock','new age'); 
            break; 
        case '3': 
            $ret=array('español','php','javascript'); 
            break; 
        default: 
            echo 'document.getElementById("pp").innerHTML="<select name=\"dos\" id=\"dos\"></select>";'; 
            exit; 
    } 
$html='<select name=\"dos\" id=\"dos\">'; 
foreach($ret as $v) 
    $html.='<option value=\"'.$v.'\">'.$v.'</option>'; 
$html.='</select>'; 
echo 'document.getElementById("pp").innerHTML="'.$html.'";'; 
exit; 
} 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>test</title> 
<script> 
function adjs(url){ 
    oldsc=document.getElementById("old_sc"); 
       if(oldsc) 
            document.getElementsByTagName('body')[0].removeChild(oldsc); 
    sc=document.createElement('script'); 
    sc.id="old_sc"; 
    sc.src=url+'&'+Math.random(); 
    document.getElementsByTagName('body')[0].appendChild(sc); 
} 
</script> 
</head> 

<body> 
<form id="form1" name="form1" method="post" action=""> 
      <select name="uno" id="uno" onchange="adjs('?p&sel='+this.value)"> 
      <option value="0">seleccionar</option> 
      <option value="1">libros</option> 
    <option value="2">música</option> 
    <option value="3">lenguaje</option> 
  </select> 
  <div id="pp"><select name="dos" id="dos"> 
  </select></div> 
</form> 
</body> 
</html>

_cronos2 · #14 (**permalink**) 30/05/2011, 11:24

Cita:

Iniciado por Panino5001

Algo como esto?:

Código PHP:

  var include=function(){ 
    return function(Src){ 
        var sc=document.createElement('script'); 
        sc.type='text/javascript'; 
        sc.src=Src; 
        document.getElementsByTagName('body')[0].appendChild(sc); 
        sc=null; 
    } 
}(); 
include('loquesea.js');

Sí, pero no entiendo por qué en mi caso no funciona. Estoy agregando al body un script HTML de verdad, pero sigue sin cargar el contenido

Cita:

var scr = ('<scr' + 'ipt src="ejemplo.js" type="text/javascript"></scr' + 'ipt>').HTML();
document.body.appendChild(scr);

Saludos (:
PD: ¿Por qué include es una función anónima que se autoinvoca? Yo soy muy patoso para esto, pero no veo el closure

zerokilled · #15 (**permalink**) 30/05/2011, 14:20

no entiendo por que queras agregar el script a traves de codigo html. si el script esta en un archivo *.js, deberia funcionarte la funcion include. por otro lado, fijate lo que te ha tratado de decir @panino. a traves de innerHTML no puedes agregar codigo javascript. razon, no lo se pero sospecho que debe ser porque el unico motor que se activa es el analizador html (user agent). si te fijas en el inspector de elementos, el navegador crea el elemento <script> pero no interpreta su codigo -en caso de ser codigo en linea- o ni siquiera carga el archivo indicado en src. tambien pudiera ser la forma en que el motor crea los nodos cuando se utiliza innerHTML. segun las pruebas que he hecho en chrome11, aparentemente el navegador no crea correctamente el nodo Text dentro del elemento <script>. sin embargo, si agregas tu mismo el nodo Text con el codigo, el navegador lo interpreta. es basicamente lo que hace el codigo de @panino.

un detalle curioso. al menos en chrome11, si el elemento <script> ya tiene un nodo Text, javascirpt no interpreta algun nuevo codigo que se le intente agregar ya sea a traves de nodo Text o propiedades text o innerHTML. es como si el elemento <script> queda inusable una vez tenga un nodo Text. es decir,

Código:

// nota: scripts en chrome es una coleccion de elementos <script>;
<body onload="document.scripts[0].text = 'alert(0);'; /* este codigo agregado no se interpreta */">
<script>
console.log('inline code'); // esta linea se interpreta de forma normal;
</script>
</body>

_cronos2 · #16 (**permalink**) 30/05/2011, 16:27

Cita:

Iniciado por zerokilled

no entiendo por que queras agregar el script a traves de codigo html. si el script esta en un archivo *.js, deberia funcionarte la funcion include.

Si en realidad sí me sirve, lo que me "molesta" es que entiendo que al usar innerHTML no lo cargue, pero si luego cojo el nodo y lo añado al body con DOM... tampoco lo carga

Y gracias por las curiosidades

Saludos (:

zerokilled · #17 (**permalink**) 30/05/2011, 19:17

si te refieres al codigo que muestras en la entrada #6, pues no tiene diferencia si se trata de un elemento existente o no en el documento. como ya te indique, tiene algo que ver con la propiedad innerHTML y la forma en que el navegador analiza el codigo a traves de dicha propiedad. de todos modos, es algo impredecible segun el navegador. observa lo siguiente en chrome11 y firefox4.

Código:

<head>
<script>
self.onload = function(){
document.body.innerHTML = "<script><"+"/script>";
document.body.firstChild.text = "alert('inserted')";
};
</script>
</head>
<body>
</body>

_cronos2 · #18 (**permalink**) 31/05/2011, 16:06

Bueno creo que al final lo conseguí, no sé si valdrá para todos los navegadores, pero ahora mismo es lo que menos me importa

Código Javascript:

Ver originalString.extender({
 'HTML' : function(){
  var str = this.replace(/^\s*([\S\s]+?)\s*$/, '$1');
  var regexps = [
                 /^<?[A-z]+>?$/,
                 /^<([A-z]+)[^>]*( \/)?>([\s\S]*?<\/\1>)?$/
                ];
  if(regexps[0].test(str)){
   return document.createElement(str);
  }
  if(regexps[1].test(str)){
   var div = document.createElement('div');
   div.innerHTML = str;
   var elmnt = P(div).primerElemento(), tn = elmnt.tagName.toLowerCase();
   if(tn !== 'script' && tn !== 'link'){
    return elmnt;
   }
   var e = document.createElement(elmnt.tagName.toLowerCase());
   var html = div.innerHTML;
   html = html.replace(/^<[A-z]+ ?/, '').replace(/<\/[A-z]+>$/, '').replace(/( \/)?>$/, '');
   html = html.split(' ');
   for(var i = 0; act = html[i]; i++){
    partes = act.split('=');
    e.setAttribute(partes[0], partes[1].replace(/('|")(.+?)\1/, '$2'));
   }
   div.innerHTML = '';
   div.appendChild(e);
   return div.firstChild;
  }
 }
});

Sin embargo sigue habiendo un "problema". Si hago esto:

Código Javascript:

Ver originalvar scr = "<script src='ejemplo.js' type='text/javascript'>";
document.body.insertBefore(scr.HTML(), document.body.firstChild);
funcionDeEjmploJs();

inserto el script al principio del body para poder usar las funciones (suponiendo que este script esté más abajo). Total, que se carga todo bien, pero a la hora de la verdad, la función no va. Así que tengo que agregarlo un onload al script

Saludos y gracias a todos (:

zerokilled · #19 (**permalink**) 31/05/2011, 21:55

sospecho que pudiera ser que al momento de invocar codigos definido en el script, aun este no existen. es decir, el script no ha cargado. por otro lado, fijate que el codigo aun tiene error. me parece que estas tratando de abarcar multiples funcionalidades. por ejemplo, si el string esta compuesto del nombre de un tag la funcion devuelve la creacion de dicho elemento. sin embargo, obtienes error si es un tag completo. por ejemplo, "<b>" genera error porque esta compuesto de caracteres invalidos.

_cronos2 · #20 (**permalink**) 31/05/2011, 23:33

Cita:

Iniciado por zerokilled

sospecho que pudiera ser que al momento de invocar codigos definido en el script, aun este no existen. es decir, el script no ha cargado. por otro lado, fijate que el codigo aun tiene error. me parece que estas tratando de abarcar multiples funcionalidades. por ejemplo, si el string esta compuesto del nombre de un tag la funcion devuelve la creacion de dicho elemento. sin embargo, obtienes error si es un tag completo. por ejemplo, "<b>" genera error porque esta compuesto de caracteres invalidos.

Sí, tiene toda la pinta, porque si ejecuto el código que depende del insertado cuando este ha cargado, todo bien.
Y también tienes toda la razón, me centré en hacer la parte "difícil" y lo otro se me pasó

Solucionado con un replace:

Código Javascript:

Ver originalString.extender({
 'HTML' : function(){
  var str = this.replace(/^\s*([\S\s]+?)\s*$/, '$1');
  var regexps = [
                 /^<?([A-z]+)>?$/,
                 /^<([A-z]+)[^>]*( \/)?>([\s\S]*?<\/\1>)?$/
                ];
  if(regexps[0].test(str)){
   return document.createElement(str.replace(regexps[0], '$1'));
  }
  if(regexps[1].test(str)){
   var div = document.createElement('div');
   div.innerHTML = str;
   var elmnt = P(div).primerElemento(), tn = elmnt.tagName.toLowerCase(); // tn = TagName
   if(tn !== 'script' && tn !== 'link'){
    return elmnt;
   }
   var e = document.createElement(elmnt.tagName.toLowerCase());
   var html = div.innerHTML;
   html = html.replace(/^<[A-z]+ ?/, '').replace(/<\/[A-z]+>$/, '').replace(/( \/)?>$/, '');
   html = html.split(' ');
   for(var i = 0; act = html[i]; i++){
    partes = act.split('=');
    e.setAttribute(partes[0], partes[1].replace(/('|")(.+?)\1/, '$2'));
   }
   div.innerHTML = '';
   div.appendChild(e);
   return div.firstChild;
  }
 }
});

Saludos y gracias de nuevo :D