post icon

Como ajustar automáticamente el height de un iframe en base a su contenido

Ya todos saben para que sirven los iframes, así que no hay mucho que agregar en eso. Por una cuestión de diseño a veces queremos incrustar otra página ya sea externa o no (siempre y cuando no se trate conlleve datos que pueden dañar la seguridad esto podría no ser buena idea) y a la vez queremos ajustar la altura del iframe de acuerdo al tamaño de la pagina embebida en el iframe.

Esto se puede solucionar de múltiples formas, una de las más sencillas y simples que hay es la siguiente:

<script type="text/javascript">
  function redimensionariframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

En el evento onload del iframe llamar a la funcion

<iframe src="..." frameborder="0" scrolling="no" onload="redimensionariframe(this)" />
17 mayo 2016

Comentarios desde Facebook:

  1. avatar
    Edison Google Chrome Windows
    16 septiembre 2017 at 14:38 #

    Por favor si encuentran un código correcto, contactarme, todos los que he utilizado siempre sirven en Microsoft Edge y Chrome NO! 🙁

  2. avatar
    JOnay VENEZUELA Mozilla Firefox Windows
    28 agosto 2017 at 18:16 #

    Hermano use su codigo pero lo coloque en la sintacis dentro del html, el problema es que en microsoft edge corre pero chrome dice que hay error! a ver si me puedes ayudar, estoy con mi proyecto de clases

    function redimensionariframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + ‘px’;
    }

Responder