El código
Para este tutorial, necesitaremos dos archivos HTML: un archivo padre donde pondremos el iframe, y un archivo hijo que contendrá el contenido del iframe.
child.html
Nuestro archivo hijo contendrá un simple generador de texto ficticio, donde la gente puede hacer clic en un botón para añadir otro párrafo de texto lorem ipsum.
Como este tutorial trata del iframe, y no de la funcionalidad de lo que contiene, siéntete libre de copiar y pegar lo siguiente en child.html:
Puedes probar el código anterior en este CodePen:
parent.html
Ahora podemos insertar nuestro iframe en parent.html.
Añade el código boilerplate habitual de HTML5, y luego inserta lo siguiente entre las etiquetas del cuerpo:
<iframe src="child.html" style="width:100%;border:none;"></iframe>
Pero aquí nos encontramos con nuestro problema. Como hemos puesto overflow: hidden, los botones y la mitad del primer párrafo desaparecen.
Y si no hubiéramos puesto overflow: hidden veríamos dos barras de desplazamiento, como en la imagen de arriba. Para resolver esto, necesitamos enviar mensajes de post desde child.html a la ventana padre.
child.html
Así que, de vuelta en child.html, necesitamos añadir nuevos escuchadores de eventos a la sección de script.
Necesitamos notificar al elemento padre la altura del iframe:
- cada vez que se cargue,
- cuando se cambie el tamaño de la ventana, y
- cuando se pulse un botón.
Cuando se produzca cada uno de estos eventos, activaremos una función llamada sendPostMessage.
Coloca el siguiente código justo antes de la etiqueta de cierre <script>:
Ahora vamos a crear nuestra función sendPostMessage().
Queremos medir la altura del elemento con el id container. Si (y sólo si) la altura cambia, queremos enviar un mensaje llamado frameHeight a la ventana padre, notificándole la actualización.
El siguiente código debería ir por encima de lo que acabamos de escribir:
El segundo argumento del método postMessage representa el origen de destino: el nombre del host de la ventana padre.
Esto es útil para la seguridad, asegurándose de que el mensaje sólo se envía a dominios específicos, pero para fines de desarrollo, podemos establecer el origen de destino a '*'. Esto significa que cualquier ventana padre recibirá el mensaje.
En general, el código de child.html debería tener el siguiente aspecto:
parent.html
Carguemos parent.html en el navegador y abramos la consola (pulsando CTRL+Shift+ J en Google Chrome).
Cuando cambiemos el tamaño de la ventana, ahora deberíamos ver aparecer valores en la consola. El último paso es utilizarlos para establecer la altura del iframe cada vez que se envíe uno de estos valores.
Necesitamos escuchar los eventos de los mensajes y cada vez que recibamos uno debemos usarlo para establecer la propiedad de altura del iframe (más un poco de relleno):
En general, tu archivo parent.html debería tener este aspecto:
¡Si has seguido los pasos correctamente, tu iframe ahora se redimensionará automáticamente como si su contenido fuera parte de la ventana padre!