Etiqueta HTML <iframe>

La etiqueta <iframe> (abreviatura de inline frame, o marco en línea) incrusta otro documento HTML dentro de la página actual. Es la forma estándar de mostrar contenido de terceros, como un reproductor de video, un mapa, un anuncio o un widget en sandbox. El documento incrustado se carga en un contexto de navegación anidado independiente de la página anfitriona, aunque ambos pueden interactuar mediante JavaScript cuando comparten el mismo origen.

Esta página cubre la sintaxis de <iframe>, sus atributos, cómo dimensionar y estilizar un marco, la carga diferida nativa del navegador y las dos características a las que debes recurrir siempre que incrustes contenido que no controlas completamente: sandbox y allow.

Para incrustar recursos que no son HTML, consulta también las etiquetas <embed> y <frame>.

Sintaxis

La etiqueta <iframe> es un elemento HTML normal que requiere una etiqueta de cierre. Añade siempre un atributo title (consulta Accesibilidad más abajo).

Ejemplo de una etiqueta HTML `<iframe>`

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe src="https://www.w3docs.com" title="W3docs homepage"></iframe>
  </body>
</html>

Pruébalo tú mismo »

Para establecer el tamaño del iframe, usa los atributos height y width, o emplea CSS. Los valores de los atributos se expresan en píxeles por defecto, aunque también pueden indicarse en porcentaje.

Ejemplo de una etiqueta HTML `<iframe>` con los atributos Height y Width

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe src="https://www.w3docs.com" title="W3docs homepage" width="80%" height="300"></iframe>
  </body>
</html>

Pruébalo tú mismo »

Los navegadores modernos no aplican un borde predeterminado a los iframes. Puedes usar igualmente la propiedad CSS border para estilizar el marco si lo necesitas.

Ejemplo de una etiqueta HTML `<iframe>` con la propiedad CSS Border

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe src="https://www.w3docs.com" title="W3docs homepage" width="80%" height="300" style="border: none"></iframe>
  </body>
</html>

Pruébalo tú mismo »

Incrustar HTML en línea con srcdoc

En lugar de apuntar a una URL con src, puedes incluir todo el marcado del marco en línea mediante el atributo srcdoc. Esto resulta útil para vistas previas, fragmentos en sandbox o HTML generado cuando no dispones de un archivo o URL separados. Si ambos atributos están presentes, srcdoc tiene prioridad (y src actúa como alternativa para los navegadores que no admiten srcdoc).

<iframe
  title="Inline greeting"
  srcdoc="<!DOCTYPE html><html><body><h1>Hello from srcdoc!</h1></body></html>">
</iframe>

Como el marcado vive dentro de un atributo HTML, las comillas dobles literales dentro de él deben escribirse como " y los ampersands como &.

Carga diferida de iframes fuera de pantalla

El atributo loading permite al navegador diferir la carga de un iframe hasta que esté a punto de entrar en el viewport. La carga diferida nativa es ya un estándar web estable, compatible con todos los navegadores modernos desde aproximadamente 2020, por lo que ya no necesitas una librería JavaScript para este caso habitual.

Valores admitidos:

lazy — difiere la carga hasta que el iframe esté cerca del viewport. Recomendado para marcos fuera de pantalla (reproductores de video, mapas, slots de anuncios) que no son visibles en el primer renderizado.
eager — carga el recurso de forma inmediata, independientemente de su posición. Este es el valor predeterminado.

<iframe src="video-player.html" title="Promo video" loading="lazy"></iframe>

Diferir los iframes fuera de pantalla reduce el peso inicial de la página, acelera la primera carga y evita consumir el ancho de banda del usuario en contenido al que quizás nunca llegue a desplazarse.

Restringir contenido con el atributo sandbox

Por defecto, una página incrustada puede ejecutar scripts, enviar formularios, abrir ventanas emergentes, navegar por la página de nivel superior y leer cookies de su propio origen. Cuando incrustas contenido que no controlas completamente, eso supone un riesgo de seguridad. El atributo sandbox aplica un conjunto estricto de restricciones y luego te permite rehabilitar solo las capacidades que el marco realmente necesita mediante una lista de tokens separados por espacios.

Un sandbox vacío (es decir, sandbox="") aplica todas las restricciones: sin scripts, sin formularios, sin ventanas emergentes, sin plugins, y el contenido se fuerza a un origen opaco único. A continuación puedes relajarlo token a token:

Token	Rehabilita
`allow-forms`	El envío de formularios.
`allow-same-origin`	Tratar el contenido como del mismo origen (para que pueda usar sus propias cookies y almacenamiento).
`allow-scripts`	La ejecución de JavaScript.
`allow-popups`	Abrir nuevas ventanas o pestañas (p. ej., `window.open`, `target="_blank"`).
`allow-downloads`	Desencadenar descargas de archivos.
`allow-modals`	Mostrar diálogos modales como `alert()`, `confirm()` y `prompt()`.
`allow-top-navigation`	Navegar por el contexto de navegación de nivel superior (la página padre).
`allow-pointer-lock`	Usar la Pointer Lock API.

Combina allow-scripts y allow-same-origin con cuidado: conceder ambos a contenido de otro origen permite efectivamente que ese contenido elimine su propio sandbox, así que hazlo solo con contenido en el que confíes.

Ejemplo de un `<iframe>` en sandbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe
      src="https://example.com/widget.html"
      title="Third-party widget"
      sandbox="allow-scripts allow-forms">
    </iframe>
  </body>
</html>

Aquí el widget puede ejecutar scripts y enviar formularios, pero no puede navegar por la página padre, abrir ventanas emergentes ni acceder a las cookies y el almacenamiento del mismo origen.

Otorgar funciones del navegador con el atributo allow

Mientras que sandbox controla las restricciones básicas del contexto de navegación, el atributo allow establece una Política de permisos para el marco: decide qué funciones potentes del navegador (cámara, micrófono, geolocalización, pantalla completa, reproducción automática, etc.) puede usar el documento incrustado. La mayoría de estas funciones están bloqueadas en iframes de origen cruzado a menos que las habilites explícitamente con allow.

<iframe
  src="https://example.com/player.html"
  title="Video player"
  allow="fullscreen; camera 'none'">
</iframe>

Esto concede al marco permiso para entrar en pantalla completa mientras deniega explícitamente el acceso a la cámara. Puedes limitar una función a orígenes específicos, p. ej., allow="geolocation 'self' https://maps.example.com".

Accesibilidad

Todo <iframe> debe tener un atributo title que describa brevemente el propósito del marco. Los lectores de pantalla anuncian el título para que los usuarios entiendan qué contiene el contenido incrustado antes de entrar en él; sin un título, el marco se anuncia solo como un "frame" sin etiqueta, lo que resulta confuso.

<iframe src="map.html" title="Map showing our office location"></iframe>

Usa un título conciso y único para cada iframe de la página (por ejemplo, "Encuesta de satisfacción del cliente" en lugar de simplemente "iframe").

Cuando una página rechaza ser enmarcada

Incrustar no siempre funciona: la página a la que apunta src puede rechazar mostrarse dentro de un marco. Los sitios hacen esto para evitar el clickjacking, donde un atacante superpone un marco oculto sobre su propia interfaz de usuario. Una página puede optar por no ser enmarcada de dos formas:

El encabezado de respuesta HTTP heredado X-Frame-Options (DENY o SAMEORIGIN).
La directiva moderna frame-ancestors de la Política de Seguridad de Contenido, p. ej., Content-Security-Policy: frame-ancestors 'self'.

Si un sitio destino envía cualquiera de estos, tu iframe mostrará un marco en blanco o de error en lugar del contenido; este es el comportamiento esperado, no un error en tu marcado. Muchos sitios grandes (bancos, redes sociales) bloquean el enmarcado por seguridad, razón por la cual no puedes incrustarlos directamente.

Atributos

Atributo	Valor	Descripción
align	left right top bottom middle	Especifica cómo se alinea y ajusta el texto alrededor del marco. No compatible con HTML5.
allow	string	Especifica una política que permite o restringe ciertas funciones en el iframe.
allowfullscreen		Define que el marco puede abrirse en modo de pantalla completa.
frameborder	1 0	Define si debe mostrarse el borde del iframe alrededor del marco. No compatible con HTML5.
height	pixels	Define la altura del marco (altura predeterminada: 150px).
longdesc	URL	Define una página que tiene una descripción larga del contenido. No compatible con HTML5.
marginheight	pixels	Define los márgenes superior e inferior del marco. No compatible con HTML5.
marginwidth	pixels	Define los márgenes izquierdo y derecho del marco. No compatible con HTML5.
loading	eager lazy	Establece si el marco se carga de inmediato o se difiere hasta estar cerca del viewport.
name	text	Define el nombre del marco (un destino para enlaces y formularios).
referrerpolicy	keyword	Establece qué información del referente se envía con la solicitud. Acepta una palabra clave como `no-referrer`, `origin` o `strict-origin-when-cross-origin`, no una URL.
sandbox	token list	Aplica restricciones adicionales al contenido del marco. Vacío (`sandbox=""`) aplica todas las restricciones; añade tokens separados por espacios como `allow-scripts` o `allow-forms` para relajarlas. Consulta la sección sandbox.
scrolling	yes no auto	Define si debe mostrarse la barra de desplazamiento. No compatible con HTML5.
seamless	seamless	Especifica que el contenido del documento adjunto debe mostrarse como parte del documento padre.
src	URL	Especifica la dirección del documento cuyo contenido se cargará en el marco.
srcdoc	HTML code	Almacena el contenido del marco directamente en el atributo, en lugar de cargar una URL separada.
title	text	Describe el contenido del marco para las tecnologías de asistencia. Debe estar presente en todos los iframes.
width	pixels	Define el ancho del marco (ancho predeterminado: 300px).

La etiqueta <iframe> admite los atributos globales y los atributos de evento.

Etiquetas relacionadas

Etiqueta HTML <frame> — define un único marco dentro de un <frameset> (framesets heredados, obsoletos en HTML5).
Etiqueta HTML <embed> — incrusta contenido externo como un plugin o recurso multimedia.

Práctica

¿Qué atributo debe tener todo iframe para que los lectores de pantalla puedan anunciar su propósito?

title: Describe el contenido del marco para las tecnologías de asistencia.name: Establece el nombre del iframe.align: Un atributo HTML5 obsoleto que posicionaba el marco a la izquierda o a la derecha.src: Especifica la URL del documento a incrustar.

Sintaxis

Ejemplo de una etiqueta HTML <iframe>

Ejemplo de una etiqueta HTML <iframe> con los atributos Height y Width

Ejemplo de una etiqueta HTML <iframe> con la propiedad CSS Border

Incrustar HTML en línea con srcdoc

Carga diferida de iframes fuera de pantalla

Restringir contenido con el atributo sandbox

Ejemplo de un <iframe> en sandbox

Otorgar funciones del navegador con el atributo allow

Accesibilidad

Cuando una página rechaza ser enmarcada

Atributos

Etiquetas relacionadas

Práctica

Ejemplo de una etiqueta HTML `<iframe>`

Ejemplo de una etiqueta HTML `<iframe>` con los atributos Height y Width

Ejemplo de una etiqueta HTML `<iframe>` con la propiedad CSS Border

Ejemplo de un `<iframe>` en sandbox