¿Cómo cambiar la altura del iframe en función del contenido dinámico dentro del iframe?

Question

Tengo un iframe que tiene contenido dinámico. Si las respuestas a preguntas específicas, muestra información adicional (Div oculto se vuelve visible). Me gustaría que la altura del iframe se expanda. Sé que esta pregunta se ha realizado varias veces aquí, pero parece que suele ser cuando se carga una página diferente dentro del iframe, no cuando el contenido se cambia dinámicamente dentro del iframe.

Aquí es un ejemplo traté de poner juntos usando jsFiddle:

iframe: http://jsfiddle.net/B4AKc/2/

página: http://jsfiddle.net/PmBrd/

¿Alguna idea?

Answer 1

¿Esto funciona para usted?

http://jsfiddle.net/PmBrd/1/

Código:

var iframe = document.getElementById("ifr").contentWindow; 

iframe.$(".toggle_div").bind("change", function() { 
    $("#ifr").css({ 
     height: iframe.$("body").outerHeight() 
    }); 
}); 

Ya que menciona que están en el mismo dominio, es sólo una cuestión de hacer algo similar con su aplicación real.

Answer 2

Eche un vistazo al complemento jQuery postMessage. Le permite pasar información del cuadro secundario al padre. Puede cambiar el código dentro del marco secundario para publicar la altura del contenido en el elemento principal en el cambio de contenido, que luego el padre podría usar para cambiar el tamaño del marco flotante en consecuencia.

Las dos páginas deben estar en el mismo dominio para trabajar.

Espero que esto ayude!

Answer 3

La respuesta de Esailija funciona bien, pero esto es más agradable.

$('#ifr').contents($(".toggle_div")).bind("change", function() { 
    $("#ifr").height($("#ifr").contents().find("html").height()); 
}); 

Answer 4

comprobar éste. Puede obtener el tamaño de iframe utilizando javascript.
Usando setInterval, verifique el alto de la ventana cada vez.

< iframe src='<YOUR_URL>' frameborder='0' scrolling='no' id='frame_id' style='overflow:hidden; width:984px;' > 
</iframe> 

<script language="javascript" type="text/javascript"> 
setInterval(function(){ 
    document.getElementById("frame_id").style.height = document.getElementById("frmid").contentWindow.document.body.scrollHeight + 'px'; 
},1000) 
</script> 

Check this

Answer 5

puede ser un poco tarde, ya que todas las otras respuestas son a partir de 2011 :-) pero ... tope aquí tienes mi solución. Probado en FF real, Chrome y Safari 5.0

$(document).ready(function(){ 
    $("iframe").load(function() { 
     var c = (this.contentWindow || this.contentDocument); 
     if (c.document) d = c.document; 
     var ih = $(d).outerHeight(); 
     var iw = $(d).outerWidth(); 
     $(this).css({ 
      height: ih, 
      width: iw 
     }); 
    }); 
}); 

Espero que esto ayude a cualquiera.