Cómo establecer el tamaño de iframe dinámicamente

4 minutos de lectura

avatar de usuario
Fero

¿Cómo debo configurar dinámicamente las dimensiones de un iframe, de modo que el tamaño sea flexible para diferentes tamaños de ventana gráfica?

Por ejemplo:

<iframe src="https://stackoverflow.com/questions/7317781/html_intro.asp" width="100%" height="300">
  <p>Hi SOF</p>
</iframe>

En este caso la altura es diferente dependiendo del tamaño de la ventana del navegador. Debe configurarse dinámicamente según el tamaño de la ventana del navegador.

En cualquier tamaño, la relación de aspecto del iframe debe ser la misma. ¿Cómo se puede hacer esto?

avatar de usuario
naveen velaga

Si usa jquery, puede hacerlo usando $(window).height();

<iframe src="https://stackoverflow.com/questions/7317781/html_intro.asp" width="100%" class="myIframe">
<p>Hi SOF</p>
</iframe>

<script type="text/javascript" language="javascript"> 
$('.myIframe').css('height', $(window).height()+'px');
</script>

  • mira esto, se ha preguntado anteriormente stackoverflow.com/q/838137/912019

    – Naveen Velaga

    6 de septiembre de 2011 a las 9:57

  • En realidad, en lugar de ancho=”100%” deberías usar estilo=”ancho: 100%”, ya que según la referencia HTML, el atributo ancho para iframe solo acepta valores en píxeles w3c.github.io/html-reference/iframe.html

    – Zé Carlos

    12 de agosto de 2015 a las 15:26

¿No está seguro de lo que se supone que significa el 300? ¿Señorita error tipográfico? Sin embargo, para iframes, sería mejor usar CSS :): antes, al importar videos de YouTube, descubrí que ignora las cosas en línea.

<style>
    #myFrame { width:100%; height:100%; }
</style>

<iframe src="https://stackoverflow.com/questions/7317781/html_intro.asp" id="myFrame">
<p>Hi SOF</p>
</iframe>

  • height="300" da el iframe un ancho de 300px.

    – Peja

    3 de julio de 2015 a las 19:10

avatar de usuario
Lamecarlado

Has probado height="100%" en la definición de su iframe? Parece hacer lo que buscas, si agregas height:100% en el css para “cuerpo” (si no lo hace, 100% será “100% de su contenido”).

EDITAR: no hagas esto. los height atributo (así como el width one) debe tener un número entero como valor, no una cadena.

  • No estoy seguro de por qué nadie votó esta respuesta, pero es bastante correcta.

    usuario234932

    23/10/2015 a las 18:35

  • De hecho, cuando leo de nuevo mi respuesta, es incorrecta. El valor de height El atributo debe ser un número entero. Editaré eso. La solución de Graeme Leighfield es la correcta.

    – Lamecarlato

    1 de febrero de 2017 a las 13:22

  • No del todo cierto. Los valores también pueden ser en porcentajes. La razón por la que 100% puede no funcionar a primera vista es que los elementos del cuerpo y html pueden no ser tan altos como espera que sean, ya que 100% tiene la misma semántica que en CSS. Mira esto por ejemplo: jsfiddle.net/ux5d06qm Entonces, la recomendación de configurarlo al 100% de altura y también configurar la altura en el cuerpo y html es correcta.

    usuario234932

    2 de febrero de 2017 a las 8:23


  • Puede trabajar pero no es válido. “Los atributos, si se especifican, deben tener valores que sean enteros no negativos válidos”. Fuente: w3.org/TR/html5/embedded-content-0.html#attr-dim-height

    – Lamecarlato

    3 de febrero de 2017 a las 22:22


  • Según las especificaciones, sí, ese parece ser el caso, aunque el uso de porcentajes parece implementarse bastante. Alternativamente, la altura y el ancho de un iframe se pueden configurar usando CSS sin tocar los atributos de altura y ancho, por lo que puedo decir.

    usuario234932

    4 de febrero de 2017 a las 9:18

Descubrí que esto funciona mejor en todos los navegadores y dispositivos (PC, tabletas y dispositivos móviles).

<script type="text/javascript">
                      function iframeLoaded() {
                          var iFrameID = document.getElementById('idIframe');
                          if(iFrameID) {
                                // here you can make the height, I delete it first, then I make it again
                                iFrameID.height = "";
                                iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
                          }   
                      }
                    </script> 


<iframe id="idIframe" onload="iframeLoaded()" frameborder="0" src="https://stackoverflow.com/questions/7317781/yourpage.php" height="100%" width="100%" scrolling="no"></iframe>

Las últimas reglas de css le permitirán usar la ventana gráfica directamente, así:

<iframe src="html_intro.asp" width="100vw" height="50vh">
  <p>Hi SOF</p>
</iframe>

Personalmente, me gusta ajustarme a iframes manipulando sus contenedores principales:

<div class="iframe-parent">
  <iframe src="html_intro.asp">
    <p>Hi SOF</p>
  </iframe>
</div>

Ahora el CSS:

.iframe-parent{
  width: 100vw;
  height: 50vh;
}

/* Expand to the entire container */
iframe{
  width: 100%;
  height: 100%;
}

avatar de usuario
Ashish Garg

La altura es diferente dependiendo del tamaño de la ventana del navegador. Debe configurarse dinámicamente según el tamaño de la ventana del navegador.

<!DOCTYPE html>
    <html>
    <body>
    
    <center><h2>Heading</h2></center>
    <center><p>Paragraph</p></center>
    
    <iframe src="url" height="600" width="1350" title="Enter Here"></iframe>
    
    </body>
    </html>

¿Ha sido útil esta solución?