La etiqueta <iframe> se utiliza para incrustar otra página web dentro de una página HTML. Esencialmente, permite mostrar contenido de una URL externa en un “marco” dentro de tu página. Esto es útil para integrar mapas, videos, o cualquier contenido externo sin necesidad de redirigir al usuario fuera de tu sitio.
Atributos Comunes del <iframe>
src: Especifica la URL del contenido que se va a mostrar en el iframe.width: Define el ancho del iframe.height: Define la altura del iframe.title: Proporciona una descripción del contenido del iframe para accesibilidad.frameborder: Controla el borde alrededor del iframe (deprecated en HTML5, pero aún utilizado en algunos casos).allowfullscreen: Permite que el contenido del iframe se muestre en pantalla completa (usualmente utilizado con videos).loading: Controla el momento en que se carga el iframe (eagerolazy).
Sintaxis Básica:
<iframe src="https://www.ejemplo.com" width="600" height="400" title="Descripción del contenido">
Tu navegador no soporta iframes.
</iframe>Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de iframe</title>
</head>
<body>
<h1>Incorporar un iframe</h1>
<iframe src="https://www.example.com" width="800" height="600" title="Sitio Externo">
Tu navegador no soporta iframes.
</iframe>
<h2>Incorporar un Video de YouTube</h2>
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" title="Video de YouTube" allowfullscreen>
Tu navegador no soporta iframes.
</iframe>
</body>
</html>Notas Importantes:
- Seguridad y Restricciones:
- Los iframes pueden estar sujetos a restricciones de seguridad. Por ejemplo, si la URL cargada en el iframe pertenece a un dominio diferente, es posible que la comunicación entre el iframe y la página principal esté restringida por la política de mismo origen (Same-Origin Policy).
- Algunos sitios pueden bloquear la carga en iframes mediante encabezados HTTP como
X-Frame-Optionspara prevenir ataques de clickjacking.
- Accesibilidad:
- El atributo
titlees importante para proporcionar una descripción accesible del contenido del iframe, mejorando la accesibilidad para usuarios que usan lectores de pantalla.
- El atributo
- Responsive Design:
- Para hacer iframes más responsivos, puedes usar CSS para ajustar su tamaño en diferentes dispositivos. Por ejemplo:
iframe {
width: 100%;
height: auto;
}