Cambio de tamaño de la ventana gráfica dentro de un iFrame

Estoy tratando de crear un Carrusel en Sencha que muestre iframes.
La idea básica es que tengo un montón de archivos HTML ya configurados para ser vistos en un iPad.
Entonces los archivos tienen una ventana gráfica y todo configurado.

creé un carrusel simple como esto:Cambio de tamaño de la ventana gráfica dentro de un iFrame

var rootPanel; 
Ext.setup({ 
    onReady: function() { 
     rootPanel = new Ext.Carousel({ 
      fullscreen: true, 
      layout: 'card', 
      items: [ 
       { html: '<iframe src="http://localhost/file1.html">' }, 
       { html: '<iframe src="http://localhost/file2.html">' }, 
       { html: '<iframe src="http://localhost/file3.html">' }, 
      ] 
     }); 
    } 
});

Los archivos de HTML a sí mismos tener este aspecto:

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Untitled Page</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <meta name="viewport" content="width=device-width; initial-scale=0.5; minimum-scale=0.5; maximum-scale=1.0;user-scalable=no"> 
    </head> 
    <body> 
     <div id="container"> 
      <div style="margin:0;padding:0;position:absolute;left:0px;top:0px;width: 1536px; height: 2048px;text-align:left;z-index:0;"> 
       <img src="image.jpg" style="width: 1536px; height: 2048px;"></div> 
     </div> 
    </body> 
</html>

El sistema de tipo de obras, excepto que la ventana no se respeta y el interior de el iframe no se aleja como debería ser. Alguna idea ?

Fuente

2011-05-26 Joen

No estoy familiarizado con sencha, pero los iframes no tienen la capacidad de establecer la altura en un porcentaje (100%). Entonces, si sencha establece el ancho y alto al 100%, no se expandirá verticalmente, sino que debe llenar el elemento horizontal horizontalmente.

¿Esto es lo que ves?

Intente configurar manualmente la altura del iframe en un tamaño suficientemente grande en px. Si tiene control del contenido del iframe, puede agregar un poco de javascript para comunicarse con el padre y decirle que cambie el tamaño de manera apropiada.

Fuente

2012-02-25 22:29:25 Arjun

Conjunto del 100% en iframe y html interno

var rootPanel; 
Ext.setup({ 
    onReady: function() { 
     rootPanel = new Ext.Carousel({ 
      fullscreen: true, 
      layout: 'card', 
      cls: 'some-cards', 
      items: [ 
       { html: '<iframe width="100%" height="100%" src="http://localhost/file1.html">' }, 
       { html: '<iframe width="100%" height="100%" src="http://localhost/file2.html">' }, 
       { html: '<iframe width="100%" height="100%" src="http://localhost/file3.html">' }, 
      ] 
     }); 
    } 
});

Y CSS ser enlace de algo como esto.

.some-cards .x-innerhtml { 
    height: 100%; 
}

Fuente

2016-08-11 06:35:57

Cambio de tamaño de la ventana gráfica dentro de un iFrame

Respuesta

Cuestiones relacionadas