Ejercicio práctico 19: Iframe de página interna
Aprende a insertar una página interna dentro de otra utilizando la etiqueta <iframe> en HTML. Este ejercicio práctico te enseñará cómo integrar contenidos internos de forma efectiva y estructurada en tu sitio web.
Actividad
Inserta una página HTML dentro de otra usando <iframe>.
Solución con el código HTML completo
Crea un documento HTML con el siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Iframe</title>
</head>
<body>
<h1>Página con Iframe</h1>
<iframe src="page.html" width="600" height="400"></iframe>
</body>
</html>
Dentro de la misma carpeta, crea otro archivo para utilizar como página interna.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Iframe - Página interna</title>
</head>
<body>
<h1>Mi página interna de ejemplo.</h1>
</body>
</html>
Variantes del mismo ejercicio
Variante 1: Iframe responsive con CSS
Los iframes con medidas fijas (width="600" height="400") no se adaptan a dispositivos móviles. Esta técnica CSS hace que cualquier iframe sea responsive manteniendo la proporción.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Iframe Responsive</title>
<style>
/* Técnica clásica: contenedor con posición relativa y padding del aspecto deseado */
.iframe-responsive {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 = 9/16 = 0.5625 = 56.25% */
height: 0;
overflow: hidden;
}
.iframe-responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Alternativa moderna usando aspect-ratio */
.iframe-moderno {
width: 100%;
aspect-ratio: 16 / 9;
}
.iframe-moderno iframe {
width: 100%;
height: 100%;
border: 0;
}
</style>
</head>
<body>
<h1>Iframe Adaptable a Móviles</h1>
<h2>Técnica clásica (padding-bottom)</h2>
<div class="iframe-responsive">
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="Video responsive clásico"
allowfullscreen
></iframe>
</div>
<h2>Técnica moderna (aspect-ratio)</h2>
<div class="iframe-moderno">
<iframe
src="page.html"
title="Página interna responsive"
></iframe>
</div>
</body>
</html>
Proporciones comunes para padding-bottom:
- 16:9 (video HD) →
56.25% - 4:3 (video clásico) →
75% - 9:16 (shorts/reels) →
177.78% - 1:1 (cuadrado) →
100%
Variante 2: Atributo sandbox para control de permisos
El atributo sandbox restringe lo que el iframe puede hacer. Esto es fundamental para seguridad, especialmente con contenido de terceros.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Sandbox en Iframe</title>
<style>
.ejemplo {
border: 1px solid #ddd;
padding: 16px;
margin: 16px 0;
border-radius: 8px;
}
.ejemplo h3 {
margin-top: 0;
}
</style>
</head>
<body>
<h1>Control de Permisos con Sandbox</h1>
<div class="ejemplo">
<h3>🔒 Máxima restricción (sandbox vacío)</h3>
<p>El contenido no puede ejecutar scripts, enviar formularios, ni acceder a cookies.</p>
<iframe
src="page.html"
sandbox=""
width="100%"
height="200"
title="Sandbox vacío"
></iframe>
</div>
<div class="ejemplo">
<h3>🔓 Permisos seleccionados (sandbox granular)</h3>
<p>Permitimos scripts y formularios, pero no popups ni navegación del top.</p>
<iframe
src="page.html"
sandbox="allow-scripts allow-forms allow-same-origin"
width="100%"
height="200"
title="Sandbox granular"
></iframe>
</div>
<div class="ejemplo">
<h3>🌐 Sin sandbox (sin restricciones)</h3>
<p>El iframe se comporta como una página normal dentro de tu sitio.</p>
<iframe
src="page.html"
width="100%"
height="200"
title="Sin sandbox"
></iframe>
</div>
</body>
</html>
Tokens de sandbox más importantes:
allow-scripts— permite ejecutar JavaScriptallow-forms— permite enviar formulariosallow-same-origin— trata el iframe como mismo origen (cookies, localStorage)allow-popups— permite abrir ventanas emergentesallow-top-navigation— permite cambiar la URL de la página padre
Variante 3: loading="lazy" para rendimiento
El atributo loading="lazy" retrasa la carga del iframe hasta que el usuario hace scroll cerca de él. Esto mejora drásticamente el rendimiento de la página.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Lazy Loading de Iframes</title>
<style>
.espaciador {
height: 800px;
display: flex;
align-items: center;
justify-content: center;
background: #f0f0f0;
border: 2px dashed #ccc;
margin: 20px 0;
font-size: 24px;
color: #999;
}
iframe {
border: 1px solid #ddd;
}
</style>
</head>
<body>
<h1>Iframes con Carga Diferida</h1>
<p>
Hacé scroll hacia abajo. Los iframes solo se cargan cuando están a punto
de entrar en la pantalla.
</p>
<div class="espaciador">⬆️ Contenido antes de los iframes ⬆️</div>
<h2>Iframe 1</h2>
<p>
Este iframe usa <code>loading="lazy"</code>. No se cargará hasta que sea visible.
</p>
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
width="560"
height="315"
loading="lazy"
title="Video con lazy loading"
allowfullscreen
></iframe>
<h2>Iframe 2</h2>
<p>Segundo iframe también con carga diferida.</p>
<iframe
src="https://www.youtube.com/embed/9bZkp7q19f0"
width="560"
height="315"
loading="lazy"
title="Segundo video con lazy loading"
allowfullscreen
></iframe>
<div class="espaciador">⬇️ Más contenido debajo ⬇️</div>
<p>
Si hubiéramos usado <code>loading="eager"</code> o ningún atributo,
todos los iframes se cargarían al abrir la página, consumiendo ancho
de banda innecesario.
</p>
</body>
</html>
Beneficios de loading="lazy":
- La página carga más rápido (menor LCP — Largest Contentful Paint)
- El usuario no descarga iframes que nunca ve
- Ahorro de ancho de banda en dispositivos móviles
- Soporte nativo en Chrome 77+, Firefox 75+, Safari 16.4+
Variante 4: Mapa de Google Maps con iframe
Un uso práctico real de iframes: incrustar un mapa interactivo de Google Maps en tu sitio de contacto o ubicación.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Mapa Interactivo</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.mapa-container {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.mapa-container iframe {
width: 100%;
height: 100%;
border: 0;
}
.info-contacto {
margin: 24px 0;
padding: 20px;
background: #f8f8f8;
border-radius: 8px;
}
</style>
</head>
<body>
<h1>📍 Nuestra Ubicación</h1>
<div class="info-contacto">
<p><strong>Dirección:</strong> Av. Corrientes 1234, CABA, Buenos Aires</p>
<p><strong>Teléfono:</strong> +54 11 4321-5678</p>
<p><strong>Horario:</strong> Lunes a Viernes de 9:00 a 18:00</p>
</div>
<div class="mapa-container">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3283.9966623318455!2d-58.3843214!3d-34.608465!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bccacb9a1cd127%3A0x75b5b5e5eeb5b5b5!2sAv.%20Corrientes%201234!5e0!3m2!1ses-419!2sar!4v1620000000000"
title="Mapa de ubicación"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
</div>
<p style="color: #666; font-size: 14px; margin-top: 12px;">
Usá el mapa interactivo para obtener direcciones desde tu ubicación actual.
</p>
</body>
</html>
Para obtener el código de inserción de cualquier ubicación: abrí Google Maps → buscá la dirección → clic en "Compartir" → pestaña "Insertar un mapa" → copiá el HTML.
Buenas y Malas Prácticas
| ✅ Buena práctica | ❌ Mala práctica |
|---|---|
Agregar title descriptivo al iframe para accesibilidad | Dejar iframes sin title (los lectores de pantalla leen "iframe") |
Usar loading="lazy" para iframes debajo del fold | Cargar 5+ iframes de YouTube en el primer pantallazo |
Usar sandbox para contenido de terceros o no confiable | Confiar ciegamente en iframes de cualquier origen |
Hacer el iframe responsive con aspect-ratio o padding-bottom | Usar width="800" height="600" fijos que desbordan en móviles |
Usar referrerpolicy para controlar qué información se envía | Dejar iframes sin política de referrer en sitios con datos sensibles |
| Verificar que la página incrustada permite iframes (X-Frame-Options) | Asumir que cualquier sitio se puede incrustar |
Preguntas Frecuentes (FAQ)
¿Por qué algunos sitios no se pueden incrustar en un iframe?
Muchos sitios configuran el header HTTP X-Frame-Options: DENY o X-Frame-Options: SAMEORIGIN para evitar que otras páginas los incrusten en iframes. Esto es una medida de seguridad contra ataques de clickjacking. GitHub, Google (búsqueda), Facebook e Instagram son ejemplos de sitios que bloquean iframes.
¿Un iframe afecta al SEO de mi página?
El contenido dentro del iframe no es indexado como parte de tu página. Google ve el iframe como un contenedor vacío que apunta a otra URL. Si el contenido es importante para tu SEO, no lo pongas en un iframe. Sin embargo, los iframes con loading="lazy" pueden mejorar el Core Web Vitals (velocidad de carga), lo que indirectamente beneficia al SEO.
¿Cómo puedo comunicar un iframe con la página padre?
A través de la API window.postMessage(). El iframe puede enviar mensajes a la página padre con parent.postMessage(data, origen) y la página padre puede escucharlos con window.addEventListener('message', callback). Esta es la forma segura de comunicación cross-origin entre iframes.
¿<iframe> y <embed> son lo mismo?
No. <iframe> es el estándar moderno para incrustar páginas HTML y contenido externo. <embed> es más antiguo, diseñado para plugins (Flash, PDFs), y aunque todavía funciona, <iframe> es la opción recomendada para la mayoría de los casos. <object> es otra alternativa para contenido embebido que puede mostrar mensajes de fallback personalizados.
🌐 ¿Querés saber más sobre iframes y elementos multimedia? Profundizá en Elementos y etiquetas en HTML donde cubrimos todas las etiquetas de contenido embebido.