Aunque hoy en día con las recomendaciones de la W3C lo común es no utilizar Iframes, estos aún continúan vigentes. Es normal que dentro de un Iframe se invoque a un recurso externo de nuestro sitio (usualmente vídeos de YouTube o paginas similares).
En un desarrollo en el que estuve trabajando el año pasado me vi en la necesidad de crear un "Wizard", el cual guiaba al usuario a través de ciertas paginas para que diligenciara información. Si bien hubiera podido utilizar algún plugin de JQuery para esta tarea, la decisión final que se tomó para este desarrollo fue la de crear una pagina en HTML5 que contuviera un Iframe y, dentro de este, se irían mostrando de manera dinámica las paginas que contienen los formularios (Esto por motivos de la tecnología en la cual estaba construido dicho portal y para evitar problemas de compatibilidad).
El problema de fondo al cual me enfrenté fue la de ir ajustando en tiempo de ejecución la altura del Iframe (se definió un ancho fijo por motivos de diseño). En Internet existen muchas fuentes dispersas que pueden ayudar en la construcción de un desarrollo como este, pero no encontré una fuente que brindara una forma sencilla y completa que me diera la solución exacta a lo que buscaba. El motivo de esta entrada es, entonces, resumir el desarrollo que realice y compartirlo con cualquier persona que pueda encontrarlo útil.
Lo primero que se debe construir es el Iframe dentro de la página principal. Los estilos iniciales se pueden definir en un CSS adjunto, pero como veremos mas adelante, la propiedad de la altura cambiará de forma dinámica.
La lógica de este desarrollo a grandes rasgos es la siguiente: Por medio de JavaScript se irán cambiando las paginas internas del Iframe según las decisiones que tome el usuario. Justo en ese momento, el Iframe ejecutará el método autoResize(this) dentro del cual se calculará la altura en PX del scroll generado por la nueva pagina. Acto seguido, el valor de esa medida se le asignará a la altura del Iframe:
Las lineas que hacen la asignación para Google Chrome, Mozilla y los demás navegadores (a excepción del siempre problemático Internet Explorer) son la 14 y la 15. Para Explorer, la linea que realiza el mismo trabajo es la linea 9.
Para finalizar y para aquellos que no sepan como asignar el contenido de un Iframe desde JavaScript, les dejo la siguiente imagen:
Comprendo que esta es una solución muy sencilla que se puede quedar corta para otro tipo de requerimientos y que, ademas, utilizando librerías modernas de JavaScript es posible realizar el mismo trabajo con muchas menos lineas. Sin embargo, considero que es un buen punto de partida para aquellos que deseen soluciones mas robustas.
