Uso habitual
Un <iframe> en HTML sirve para incrustar otra página web dentro de una página web. Básicamente, es como poner una ventana dentro de tu sitio que muestra contenido de otra URL.
Casos de uso comunes:
- Incrustar videos (como los de YouTube).
- Mostrar mapas interactivos (como Google Maps).
- Cargar documentos externos (como PDFs o presentaciones).
- Incluir contenido de otro dominio (como widgets de redes sociales o chats en vivo).
Ejercicio Iframe
En una página html, inserta un iframe que permita visualizar un video de youtube, un video de vimeo y un mapa de Google Maps.
Ver código fuente
Carga de contenido utilizando iframes
Cambiar el contenido de un iframe utilizando un enlace
<a href="https://pablomonteserin.com/" target="nombreDelIframe">Otra página</a>
<iframe src = "http://csszengarden.com/" width="500px" height="500px" name="nombreDelIframe"></iframe>Notas
- El atributo target define dónde se va a cargar la información del enlace. En este caso, debe coincidir con el valor del atributo name del iframe.
- Ojo! El iframe no se cierra en la propia etiqueta (<iframe />).
Razones por las que no debes utilizar frames para hacer una navegación:
- Están desaconsejados por el W3C.
- El usuario debe entrar siempre por la página principal, donde se encuentra la declaración de marcos. Si accediese por otra página diferente se perdería elementos tales como la navegación (el uso más frecuente de los frames)
- Al no cambiar la URL en las diversas páginas, el usuario no podrá añadir a sus favoritos secciones de la página
- Los botones «anterior» y «siguiente» de los navegadores pueden no funcionar adecuadamente. Así mismo podemos dificultar el uso del Historial del Navegador.
- Si el usuario desea imprimir la página podemos obtener resultados no deseados.
- No podemos promocionar páginas interiores ya que necesitamos que los visitantes accedan por la página principal.
- «Esta página utiliza frames pero su navegador no lo soporta»
Atributo target
Determina dónde se va a cargar la información de un enlace. Por defecto no se pone y la web se cargará en la propia pestaña.
target="_blank" cargará la información en una nueva pestaña.<a href="#" target="_blank"></a>Ejercicio iframe – haciendo una navegación
Cambiar el contenido de un iframe pulsando enlaces.