Problema al insertar iframes en DIVS extrayendo datos con XMLHttpRequest de XML

[generico]

Hola muy buenas a todos. Llevo un par de días trabado en el proyecto que estoy haciendo, he buscado información tanto en español como inglés pero no doy con una posible solución.

Os cuento: Tengo un DIV ('capa') donde voy cambiando el contenido con getElementById('capa').innerHTML. Funciona perfecto, pero cuando el contenido es un iframe, un código embebido o similares (<object> por ejemplo) me cambia el código, me lo reordena. Y necesito que no me lo cambie porque en la aplicación comparo lo que tengo originalmente con lo que hay actualmente en la 'capa'.

Os pongo un ejemplo de lo que hace:
Si tengo esto: <iframe width="400" height="200" src="https://www.youtube.com/embed/-3bKJZxBrMI" frameborder="0" allowfullscreen></iframe>

Me lo cambia por esto: <iframe src="https://www.youtube.com/embed/-3bKJZxBrMI" allowfullscreen="" frameborder="0" height="200" width="400"></iframe>

Como podeis ver, el width y el height están cambiados de sitio, así como el allowfullscreen al que se le ha añadido ="".
Quiero que no se cambie, que lo muestre tal cual.

El valor del DIV lo cambio con el siguiente código:

Código: [Seleccionar]

document.getElementById('capa').innerHTML = embed;donde embed lo extraigo de un archivo XML que tengo de la siguiente forma:

Código: [Seleccionar]

var embed = anotaciones[cent].getElementsByTagName("embed")[0].childNodes[0].nodeValue;
¿Alguien me puede hechar un cable? ¡¡No sé cómo continuar!!!

[Ogramar]

Hola pega el código HTML, JavaScript, etc. completo para poder revisarlo. Salu2

[generico]

Ok voy a ello:

Código que utilizo para leer el XML y sacar las anotaciones, es decir, en ese XML tengo metido los iframes y demás que quiero luego meter en el DIV:

Código: [Seleccionar]

<script type="text/javascript">




if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","upload/anotaciones/anotaciones.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;


var cent = 0;
var anotaciones=xmlDoc.getElementsByTagName("anotacion");
</script>
Ahora con esta función es cuando cambio el contenido del DIV:

Código: [Seleccionar]

<script type="text/javascript">
function updateValues() {
   
   var vid = document.getElementById("video");
var current = vid.currentTime;

   for(i=0;i<anotaciones.length;i++){ //recorremos todas las anotaciones buscando en qué lugar nos encontramos. Si current está entre seg y seg2 es que hemos encontrado donde estamos, en qué anotación
       if(current>=anotaciones[i].getElementsByTagName("seg")[0].childNodes[0].nodeValue && current<anotaciones[i].getElementsByTagName("seg2")[0].childNodes[0].nodeValue){
   cent=i;
       }
   }
   var img = anotaciones[cent].getElementsByTagName("img")[0].childNodes[0].nodeValue;
   var embed = anotaciones[cent].getElementsByTagName("embed")[0].childNodes[0].nodeValue;
    //si estamos entre seg y seg2 vamos a mostrar el comentario, sino no mostraremos nada
if(current>=anotaciones[cent].getElementsByTagName("seg")[0].childNodes[0].nodeValue && current<anotaciones[cent].getElementsByTagName("seg2")[0].childNodes[0].nodeValue){
    //ahora hacemos un if para que los elementos de la capa SOLO CAMBIEN cuando lo que hay en el xml sea diferente de lo que hay en la capa. Así la capa no se actualiza cada 0,1 segundos
if(img + "<br>" + anotaciones[cent].getElementsByTagName("texto")[0].childNodes[0].nodeValue +  "<br>" + embed != document.getElementById('capa').innerHTML){
document.getElementById('capa').innerHTML = img + "<br>" +  anotaciones[cent].getElementsByTagName("texto")[0].childNodes[0].nodeValue +  "<br>" + embed;
if(embed!=""){ //si hay un embed (aplicacion, video, flash) que el video se pare.
pausarlink();
var mostrarcapa=document.getElementById('capa').innerHTML;
alert(mostrarcapa);//esto es para mostrar el contenido de 'capa' una vez lo hemos metido.
}
}
}else{
document.getElementById('capa').innerHTML = " ";
}

}</script>
Y la capa simplemente tiene esto al instante inicial:

Código: [Seleccionar]

<div id="capa" style="width:480px; height:135px; background-color: #CAF3F0;">
    ANOTACIONES:<br>
    </div>

[Ogramar]

Hola mi impresión es que el problema puede estar relacionado con:

- Qué es lo que tienes en el XML (¿está en un formato adecuado?)

- Cómo se importa lo que tienes en el XML (una vez te traes el contenido del XML, prueba a mostrarlo con un alert a ver si coincide con lo que tú esperas)

Salu2

[Príncipe_Azul]

Hola, no se si esto que diré te servirá, quizás no sea tu caso y disculpame.

Yo he tenido la misma duda tuya en un tiempo, pero fácilmente me di cuenta porque algunos valores se cambiaban de lugar, por ejemplo yo si voy a crear o modificar una página web con un editor que utilizaba (Kompozer), y pongo un código HTML, cuando guardo la página y la abro desde el navegador, el código que yo he puesto no aparece en el mismo orden que lo puse, es decir que simplemente el mismo editor de páginas webs es el que me cambia el orden, por más que lo pongo por decirte algo tonto pero para que se entienda:

a b c d e f

el me lo cambia a:

b e f a c d

la única forma de que quede igual a como lo dejo, es modificar o crear el código mediante Notepad++ ya que el mismo es un editor de códigos de programación, no un editor de páginas webs. De igual forma no se si todos los editores de páginas webs hacen lo mismo de cambiarte de lugar ciertos valores, atributos, etc..

Saludos.

[generico]

Ogramar: Gracias por tu respuesta. En el XML guardo los códigos html dentro de CDATA para que no haya problemas:

Código: [Seleccionar]

<![CDATA[<iframe width="400" height="200" src="https://www.youtube.com/embed/-3bKJZxBrMI" frameborder="0" allowfullscreen></iframe>]]>Por otro lado, he hecho lo que dices y he puesto un alert para que me muestre lo que extrae del XML. Curiosamente, lo extrae perfectamente, es decir, lo que saca del XML está perfecto, sin modificar nada. Se cambia una vez lo meto dentro del DIV con innerHTML. ¡Me estoy volviendo loco! jajajaj

Príncipe_Azul: Muchas gracias por tu respuesta, para nada molestas tio. Para programar la aplicación estoy usando Notepad++, así que según lo que dices, no debería cambiarme las cosas.
De todas formas, voy a realizar varias pruebas con otros editores y navegadores, porque no sé donde puede estar el problema.

Si alguien encuentra algún fallo o sabe lo que puede estar fallando que me lo diga, ¡se lo agradecería muchísimo!
Un saludo y muchas gracias por vuestras respuestas

[generico]

¡Hola de nuevo! He hecho una prueba que quizá ayude.

He creado un nuevo DIV donde he insertado lo siguiente, directamente desde Notepad++, sin leer nada del XML y sin usar innerHTML:

Código: [Seleccionar]

<div id="capa23232" style="width:480px; height:135px; background-color: #CAF3F0;">
<iframe width="400" height="200" src="https://www.youtube.com/embed/-3bKJZxBrMI" frameborder="0" allowfullscreen></iframe>
    </div>
Mirando el código fuente de la página veo que el código está perfecto, peeeeero, si hago un alert de lo que contiene el DIV ya me lo muestra cambiado:

Código: [Seleccionar]

var mostrarcapa23=document.getElementById('capa23232').innerHTML;
alert(mostrarcapa23);
Es decir, creo que el problema está muy cerca jaja. ¿Por qué demonios me lo cambia? Yo quiero usar el código que tengo en el código fuente, no el que sale por pantalla al usar alert o al usar un if.

¡Un saludo!

[Ogramar]

Con las averiguaciones que has hecho pienso que el asunto puede estar en cómo trabaja internamente el navegador. Cuando tú insertas información en el documento HTML el navegador no inserta texto, lo que hace es trabajar con nodos del DOM (ver http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=801:dom-o-document-object-model-javascript-ique-es-para-que-sirve-w3c-nodos-child-ejemplos-cu01123e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206)

Cuando llamas a esto:

var mostrarcapa23=document.getElementById('capa23232').innerHTML;
alert(mostrarcapa23);

Lo que estás rescatando es cómo ha organizado el navegador internamente la información, eso lo hace para tratar la información del modo más eficiente posible, es decir, no almacenará las cosas como tú las escribas sino como él considere que es más eficiente.

Eso explicaría por qué te cambia el orden con que escribes las cosas. No estoy seguro, pero es una posibilidad.

Salu2