Tema: iframe con height auto
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 24/09/2014, 08:39
Avatar de ceaped
ceaped
 
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 3 meses
Puntos: 9
Respuesta: iframe con height auto
Hola CHuLoSoY
Mira utilizo un acordeón y en cada pestaña carga un iframe, te pongo el código:

Código Javascript: 
Ver original
  1. <head>
  2. <script type="text/javascript">
  3.     jQuery(document).ready(function() {
  4.     
  5.     jQuery('.bloque_activador').click(function() {
  6.     jQuery('.bloque_activador').removeClass('on');
  7.     jQuery('.accordionContent').slideUp('normal');   
  8.     if(jQuery(this).next().is(':hidden') == true) {     
  9.     jQuery(this).addClass('on');              
  10.     jQuery(this).next().slideDown('normal');
  11.     }
  12.     
  13.     //Alto auto del iframe
  14.     var lastHeight = 0, curHeight = 0, jQueryframe = jQuery('iframe'),
  15.     curHeight = jQueryframe.contents().find('body').height();
  16.     if ( curHeight != lastHeight ) {
  17.         jQueryframe.css('height', (lastHeight = curHeight) + 'px' );
  18.     }
  19.     //Fin Alto auto del iframe
  20.           
  21.      });
  22.     
  23.     jQuery('.accordionContent').mouseover(function() {
  24.     jQuery(this).addClass('over');      
  25.     }).mouseout(function() {
  26.     jQuery(this).removeClass('over');                                       
  27.     }); 
  28.     jQuery('.accordionContent').hide();
  29.     
  30.  
  31. });
  32. </script>
  33. </head

Y asi tengo las pestañas cada una con su iframe:

Código HTML: 
Ver original
  1. <body>
  2. <h2 class="bloque_activador">Texto...</h2>
  3. <div class="accordionContent" >
  4. <iframe src="pagina_01.html" scrolling="no" frameborder="0"></iframe>
  5. </div>
  6.  
  7. <h2 class="bloque_activador">Texto...</h2>
  8. <div class="accordionContent" >
  9. <iframe src="pagina_02.html" scrolling="no" frameborder="0"></iframe>
  10. </div>
  11.  
  12. <h2 class="bloque_activador">Texto...</h2>
  13. <div class="accordionContent" >
  14. <iframe src="pagina_03.html" scrolling="no" frameborder="0"></iframe>
  15. </div>
  16. </body>

Mira que pagina_01.html, pagina_02.html y pagina_03.html, cada una tienen una dimensión distinta.

Código Javascript: 
Ver original
  1. //Alto auto del iframe
  2.     var lastHeight = 0, curHeight = 0, jQueryframe = jQuery('iframe'),
  3.     curHeight = jQueryframe.contents().find('body').height();
  4.     if ( curHeight != lastHeight ) {
  5.         jQueryframe.css('height', (lastHeight = curHeight) + 'px' );
  6.     }
  7.     //Fin Alto auto del iframe

Este código es el que me da el alto auto, pero sí navego las pestañas en desorden pestaña 3, pestaña 1 y pestaña 2 no me funciona.

¿Cómo hago para que cada height sea auto?

Nota: pagina_01.html, pagina_02.html y pagina_03.html están en mi servidor no son páginas externas.

Gracias por tu ayuda
__________________
Diseñador Gráfico publicitario