Etiqueta iframe
La etiqueta iframe permite incrustar el contenido de un sitio web en otro. Se utiliza para mostrar contenido, como videos, imágenes o artículos, sin necesidad de abrir una nueva ventana o pestaña.
El contenido del sitio web incrustado tendrá
el diseño de ese sitio específico. Mientras tanto, los estilos CSS
de nuestro sitio, así como nuestro código JavaScript
no afectarán el contenido de la etiqueta iframe.
Se puede aplicar nuestro JavaScript
al contenido del iframe, pero para ello es necesario actuar
con métodos especiales.
La etiqueta iframe se utiliza ampliamente en sitios web para incrustar videos de YouTube y otras plataformas, así como para mostrar artículos e imágenes de otras fuentes.
Atributos
| Atributo | Descripción |
|---|---|
src |
Especifica la dirección URL de la página que debe incrustarse. |
srcdoc |
Permite definir el contenido del iframe directamente en el atributo. |
frameborder |
Establece un borde alrededor del iframe.
El valor yes establece el borde (por defecto),
y el valor no elimina el borde.
|
scrolling |
Establece las barras de desplazamiento dentro del iframe.
El valor auto - desplazamiento según sea necesario (por defecto),
el valor yes - desplazamiento siempre presente,
el valor no - sin desplazamiento.
|
Ejemplo
Incrustemos en nuestro sitio un iframe con otro sitio web (por ejemplo, tomemos code.mu):
<iframe src="https://code.mu/" width="600" height="400"></iframe>
:
Ejemplo
Incrustemos un video de YouTube en nuestro sitio:
<iframe
src="https://www.youtube.com/embed/KzQrHpB1H8U"
allowfullscreen
width="400"
height="400">
</iframe>
:
Ejemplo
Escribamos el contenido directamente en el iframe:
<iframe
srcdoc="<h1>head</h1><p>text</p>"
width="300"
height="200">
</iframe>
:
