Etiqueta HTML <iframe>
La etiqueta <iframe> crea un marco en línea para incrustar contenido de terceros (multimedia, applets, etc.). Aunque el contenido del marco y la página web son independientes, pueden interactuar a través de JavaScript.
Sintaxis
La etiqueta <iframe> es un elemento HTML normal que requiere una etiqueta de cierre.
Ejemplo de una etiqueta HTML <iframe>:
Ejemplo de la etiqueta HTML <iframe>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe src="https://www.w3docs.com"></iframe>
</body>
</html>Para establecer el tamaño del iframe, utilice los atributos height y width, o use CSS. Los valores de los atributos se establecen en píxeles de forma predeterminada, pero también pueden estar en porcentaje.
Ejemplo de una etiqueta HTML <iframe> con los atributos height y width:
Ejemplo de la etiqueta HTML <iframe> con un atributo height
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe src="https://www.w3docs.com" width="80%" height="300"></iframe>
</body>
</html>Los navegadores modernos no aplican un borde predeterminado a los iframes. Aún puede usar la propiedad border de CSS para estilizar el marco si es necesario.
Ejemplo de una etiqueta HTML <iframe> con la propiedad border de CSS:
Ejemplo de la etiqueta HTML <iframe> con un atributo style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe src="https://www.w3docs.com" width="80%" height="300" style="border: none"></iframe>
</body>
</html>El nuevo atributo loading
Existe un nuevo atributo HTML loading que permite diferir la carga de imágenes e iframes hasta que estén cerca de mostrarse. Para esta función, WHATWG tiene una solicitud de extracción (pull request), y ya es parte de Chromium (desde la versión 76).
Los valores admitidos para el atributo loading incluyen:
- "lazy", que pospone la carga hasta que la imagen o el iframe alcance un umbral de distancia desde el viewport.
- "eager", que carga el recurso inmediatamente.
Puede usar el valor lazy para aprovechar la carga diferida nativa del navegador:
Etiqueta HTML <iframe>
<iframe src="video-player.html" loading="lazy"></iframe>La carga diferida (lazy loading) es un conjunto de técnicas en el desarrollo web y de aplicaciones que pospone la carga de recursos en una página para un momento posterior en el que se necesitan, en lugar de cargarlos de inmediato. Estas técnicas ayudan a mejorar el rendimiento, una mejor utilización de los recursos del dispositivo y a reducir los costos asociados.
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| align | left right top bottom middle | Especifica cómo se alinea y envuelve el texto alrededor del marco. No es 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 el borde del iframe alrededor del marco debe mostrarse o no. No es compatible con HTML5. |
| height | pixels | Define la altura del marco (altura predeterminada 150px). |
| longdesc | URL | Define una página que contiene una descripción larga del contenido. No es compatible con HTML5. |
| marginheight | pixels | Define los márgenes superior e inferior del marco. No es compatible con HTML5. |
| marginwidth | pixels | Define los márgenes izquierdo y derecho del marco. No es compatible con HTML5. |
| name | text | Define el nombre del marco. |
| referrerpolicy | URL | Especifica qué información del remitente (referrer) se enviará con la solicitud. |
| sandbox | Añade restricciones adicionales para el contenido dentro del marco. | |
"" – Aplica todas las restricciones.<br>allow-forms – Permite el envío de formularios o una página incrustada.<br>allow-same-origin – Considera el documento adjunto como un documento descargado desde la misma fuente que el documento principal.<br>allow-scripts – Habilita la ejecución de scripts en una página anidada.<br>allow-top-navigation – Permite que el contenido del documento adjunto acceda a elementos de nivel superior (documentos, ventanas). | ||
| scrolling | yes no auto | Define si la barra de desplazamiento debe mostrarse o no. No es compatible con HTML5. |
| seamless | seamless | Especifica que el contenido del documento adjunto debe mostrarse como parte del documento principal. |
| 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. |
| width | pixels | Define el ancho del marco. (el ancho predeterminado es 300px). |
La etiqueta <iframe> admite los Atributos globales y los Atributos de eventos.
Práctica
¿Cuáles son los atributos de una etiqueta iFrame HTML?