Definición:

Un iFrame (inline frame o marco en línea) es un elemento HTML que inserta otra página o documento dentro de la página actual. El contenido incrustado se carga en su propio contexto de navegación, con su documento, URL y recursos, aunque se muestre dentro de un área de la página principal.

Los iFrames se utilizan para integrar vídeos, mapas, formularios, paneles, anuncios y otros componentes proporcionados por servicios externos. La página anfitriona determina el espacio y los permisos del marco, pero el proveedor del contenido mantiene el control sobre el documento que se carga en él.

Índice de contenidos

1 Cómo funciona un iFrame
2 Usos habituales
3 Atributos principales
4 Seguridad y privacidad
5 Rendimiento, accesibilidad y medición
6 iFrames, SEO y alternativas

Cómo funciona un iFrame

El navegador crea un contexto independiente al encontrar la etiqueta <iframe>. El atributo src indica la URL que debe cargar y las dimensiones se pueden definir mediante atributos HTML o CSS. Un ejemplo básico es:

<iframe
  src="https://www.ejemplo.com/contenido"
  title="Descripción del contenido incrustado"
  width="600"
  height="400"
  loading="lazy">
</iframe>

El documento principal y el documento incrustado siguen siendo recursos distintos. Cuando pertenecen al mismo origen pueden interactuar mediante JavaScript con menos restricciones. Si proceden de dominios, protocolos o puertos diferentes, la política de mismo origen limita el acceso directo entre ambos. Para intercambios controlados entre ventanas puede utilizarse window.postMessage() verificando siempre el origen de los mensajes.

Usos habituales

Un iFrame resulta apropiado cuando un servicio ofrece un componente preparado para incrustarse o cuando el contenido necesita conservar su propio entorno. Entre sus aplicaciones más frecuentes se encuentran:

Vídeos y audio: Reproductores alojados por plataformas externas.
Mapas: Vistas interactivas de servicios como Google Maps.
Formularios y reservas: Interfaces gestionadas por un proveedor especializado.
Paneles e informes: Visualizaciones que se actualizan desde otra aplicación.
Anuncios y contenidos interactivos: Piezas servidas y controladas desde sistemas externos.

También puede emplearse para aislar una interfaz concreta dentro de una aplicación. No es necesario usarlo para una imagen estática ni para contenido editorial que puede integrarse directamente en el HTML de la página.

Atributos principales

La referencia del elemento iFrame recoge una configuración que combina atributos de contenido, permisos, privacidad y carga. Los más relevantes son:

src: Define la dirección del documento que se va a mostrar.
srcdoc: Permite proporcionar directamente el HTML que representará el documento incrustado.
title: Describe el contenido del marco para que las personas que utilizan tecnologías de asistencia puedan identificarlo.
width y height: Establecen sus dimensiones iniciales, que pueden adaptarse después mediante CSS.
loading: Con el valor lazy, pospone la carga de marcos alejados del área visible.
sandbox: Aplica restricciones al documento y permite levantar solo las capacidades necesarias mediante valores específicos.
allow: Define qué funciones, como pantalla completa, cámara o micrófono, puede utilizar el contenido según la política de permisos.
referrerpolicy: Controla la información de referencia enviada al solicitar el recurso.

Los atributos frameborder, scrolling y longdesc utilizados en código antiguo están obsoletos. La presentación debe resolverse con CSS, mientras que la descripción accesible corresponde al atributo title y al contexto visible que rodea al marco.

Seguridad y privacidad

Un iFrame no proporciona aislamiento seguro por el mero hecho de existir. El atributo sandbox permite restringir scripts, formularios, ventanas emergentes, navegación y otras capacidades, pero conviene habilitar únicamente los permisos necesarios. Una combinación demasiado permisiva puede anular buena parte de esa protección.

La página incrustada puede cargar sus propios recursos y solicitar datos de almacenamiento de acuerdo con las reglas del navegador. Al integrar servicios de terceros deben revisarse su procedencia, sus cookies, el consentimiento aplicable y la información que recibe el proveedor, incluida la URL de referencia cuando no se limita mediante referrerpolicy.

El sitio de origen también puede impedir que sus páginas se incrusten mediante la directiva frame-ancestors de Content Security Policy o la cabecera X-Frame-Options. Cuando esto ocurre, el navegador rechaza la carga dentro del marco; no es un problema que pueda solucionarse modificando las dimensiones del iFrame.

Rendimiento, accesibilidad y medición

Cada iFrame incorpora otro documento y puede descargar HTML, estilos, scripts, imágenes o fuentes. Acumular varios marcos aumenta el consumo de red, memoria y procesamiento. loading="lazy" ayuda con elementos que aparecen más abajo, pero no reemplaza la revisión del peso y comportamiento del servicio incrustado.

En accesibilidad, el title debe explicar la función del marco, no repetir simplemente la palabra «iFrame». El componente incrustado también necesita navegación por teclado, foco visible y contenido accesible dentro de su propio documento. Un diseño responsive debe evitar anchos fijos que generen desplazamiento horizontal.

La medición puede requerir coordinación entre la página anfitriona y el proveedor. Las interacciones internas no se convierten automáticamente en eventos de analítica de la página principal. Según el control disponible, la instrumentación puede residir dentro del documento incrustado, utilizar una integración ofrecida por el servicio o comunicar eventos mediante postMessage().

iFrames, SEO y alternativas

El contenido de un iFrame no forma parte del HTML principal, aunque un buscador pueda rastrear el documento incrustado como una URL independiente. Por ello, la información esencial para entender y posicionar una página no debería depender exclusivamente de un marco externo. La página anfitriona debe aportar su propio título, texto, enlaces y contexto útil.

Los iFrames siguen siendo una solución válida para componentes externos bien delimitados. Cuando el sitio necesita controlar por completo el contenido, su diseño, rendimiento y medición, puede resultar más adecuado integrarlo en el documento, cargar datos mediante una API o construir el componente en la propia aplicación. La elección depende del control disponible, los permisos necesarios y la función que debe cumplir el contenido.