2010-12-22 28 views
12

Hay cantidad total de de ejemplos que muestran cómo establecer dinámicamente la altura de iframe en su contenido. Esto funciona perfecto para mi El problema que estoy teniendo ahora es que el contenido puede cambiar de tamaño sin activar onload (piense oculto/expandible div s).Detectar el cambio de altura del contenido del marco iframe

¿Hay alguna forma de detectar cuándo ha cambiado el tamaño del contenido de iframe? Esto está en el mismo dominio y no jQuery, por favor.

Respuesta

14

Haría esto al sondear regularmente (tal vez cada 200 milisegundos, tal vez con más frecuencia) usando setInterval. Luego puede comparar el tamaño del contenido con la última vez.

var iframe = document.getElementById('myIframe'), 
    lastheight; 

setInterval(function(){ 
    if (iframe.document.body.scrollheight != lastheight) { 
     // adjust the iframe's size 

     lastheight = iframe.document.body.scrollheight; 
    } 
}, 200); 
+0

Pensé en esto pero luego leí https://developer.mozilla.org/en/DOM/Detecting_document_width_and_height_changes: 'Mientras puede sondear los valores de document.scrollWidth y document.scrollHeight para ver si hay cambios en el documento tamaño, la lectura de estas propiedades puede desencadenar el reflujo del documento, lo que puede hacer que sea costoso desde el punto de vista informático. De todos modos, lo intentaré. –

+0

@Nelson Interesante, no lo sabía. No sé si es aplicable (se refiere a 'document.scrollheight' en lugar de la altura de desplazamiento de un elemento, pero es probable que sea algo que se debe vigilar. Siempre se puede disminuir la frecuencia de sondeo ... – lonesomeday

+0

Buen punto, yo ' m doing 'document.body.scrollHeight'. El rendimiento alcanzado no se nota en IE en mi computadora. Probaré con otros navegadores, pero hasta ahora parece que funcionará. –

0

Para los navegadores no webkit, hay algunas domMutation-Events, que se activan cuando un atributo de un elemento (por ejemplo, el elemento del cuerpo) cambio. Ver DOMSubtreeModified y más importantemente DOMAttrModified.

El explorador de Internet activa el evento onresize incluso en elementos que no son de Windows.

Opera honra los eventos de domMutation.

Webkit descartó estos eventos como un compromiso para la velocidad de renderizado y el rendimiento de JavaScript. No hay otra manera que verificar a través del tiempo de espera/intervalo el tamaño efectivo de un elemento.

+0

Intenté' onresize' en IE y se dispara cuando la página se está cargando, pero no después de que el div se expande. –

Cuestiones relacionadas