Definición: 
iFrame es la abreviatura de Inline Frame, un marco flotante (frame) que permite insertar un documento html dentro de otro. Fue una técnica muy utilizada ya en las primeras páginas web, en las que se introducía un marco con un menú y otro en el que se mostraban las páginas de destino, todo ello dentro de un único html.
El iFrame es una herramienta muy útil cuando se necesita insertar contenido alojado externamente, como un vídeo incrustado, una imagen o contenido minuto a minuto en un periódico digital, por ejemplo. Uno de los usos más habituales de un iFrame es la inserción de un mapa con Google Maps que suele aparecer en el apartado ‘Compartir’ de Google Maps.
Código de iFrame
El código de un iFrame se inicia con la etiqueta <iframe>, dentro de la cual se especifica la URL del contenido que se desea mostrar. Un ejemplo básico de un iFrame sería:
<iframe src="https://www.ejemplo.com" width="600" height="400"></iframe>Atributos de un iFrame
Los iFrames admiten varios atributos que permiten personalizar su apariencia y funcionalidad:
- src: Define la URL del documento HTML que se mostrará dentro del iFrame.
- height: Establece la altura del iFrame en píxeles o porcentajes.
- width: Establece la anchura del iFrame en píxeles o porcentajes.
- name: Asigna un nombre al iFrame, útil para referenciarlo desde scripts o enlaces.
- longdesc: Proporciona una URL a una descripción detallada del contenido del iFrame, útil para accesibilidad.
- scrolling: Define si el iFrame debe mostrar barras de desplazamiento; puede ser «yes», «no», o «auto».
- frameborder: Especifica si el borde del iFrame debe mostrarse (0 para ocultar, 1 para mostrar).
- allowfullscreen: Permite que el contenido del iFrame se expanda a pantalla completa.
Ventajas y desventajas de los iFrames
Ventajas:
- Flexibilidad: Permite integrar contenido de diferentes fuentes sin necesidad de integrarlo directamente en el código fuente principal.
- Aislamiento: El contenido del iFrame está aislado del documento principal, lo que puede mejorar la seguridad y la estabilidad.
- Reutilización: Facilita la reutilización de contenido compartido en múltiples páginas web.
Desventajas:
- Medición complicada: Los iFrames pueden complicar el seguimiento de métricas web, ya que es necesario implementar píxeles de seguimiento adicionales dentro del iFrame, lo que puede llevar a duplicaciones o pérdidas de datos.
- SEO limitado: El contenido dentro de un iFrame no es fácilmente indexado por los motores de búsqueda, lo que puede afectar la optimización para motores de búsqueda (SEO) de la página.
- Compatibilidad: Algunos navegadores o configuraciones de seguridad pueden bloquear iFrames, especialmente si el contenido es de un dominio diferente.
iFrames en el diseño web moderno
Si bien los iFrames han sido una herramienta útil en el desarrollo web, su uso ha disminuido con el tiempo debido a las limitaciones mencionadas. En el diseño web moderno, se prefieren métodos como AJAX y APIs para integrar contenido dinámico, ya que ofrecen un mayor control y flexibilidad. Sin embargo, los iFrames siguen siendo útiles en situaciones donde se necesita integrar contenido externo de manera rápida y sencilla.