Un iframe es un elemento HTML que contiene algún otro documento HTML dentro de él. Este puede ser insertado en cualquier lugar del código HTML y, por lo tanto, aparecer en el lugar deseado de una página. Gracias a estos elementos, se pueden incrustar contenidos en una página web, ya sea un video, un formulario, un documento o, incluso, otra página web.
Para qué sirve la etiqueta iframe
Los sitios web, generalmente, utilizan los iframes para incluir elementos externos. Pensemos en el caso de los videos. Es común que los sitios web usen estos elementos incrustándolos en sus páginas. Son recursos que pueden añadir un gran valor a tu sitio, ya que ayudan a atrapar, informar y encantar a tus visitantes (siempre y cuando tenga sentido que los hayas integrado). En este caso, YouTube es una solución de hosting de video; para ello, la principal ventaja es que no necesitas almacenar los elementos en tu servidor, sino simplemente incrustarlos en tu código HTML.
Como puedes ver, esta es una de las capacidades más útiles de este lenguaje de programación, ya que puedes tomar algún contenido de cualquier otros sitio web (con el permiso del propietario) y colocarlo en el propio para mejorar la experiencia de navegación.
Atributos de un iframe
Como pudiste apreciar en el ejemplo anterior, el elemento incrustado existe de forma independiente a la página en donde se ha insertado. Por ello, y debido a que tiene un propio código HTML, CSS y JavaScript, el sitio nos arroja un elemento con las propiedades del sitio fuente, como la tipografía y el estilo.
Pero al incrustarlo, es común que necesitemos que el elemento tenga algunos atributos adicionales, como la altura y ancho. Estos ayudan a definir la región en la que aparecerá el documento incrustado, ya sea como pixeles o porcentajes.
Como todos los otros elementos HTML, los iframes pueden ser personalizados mediante otros atributos. Aquí hay algunos de los más comunes:
allow
Indica las funciones que un iframe puede usar, como pantalla completa, cámara o reproducción automática.
allowfullscreen
Autoriza o niega el permiso para que un iframe aparezca en pantalla completa.
height
Establece la altura (el tamaño automático es de 150 pixeles).
loading
Define si el elemento tendrá una carga diferida o simultánea al acceso a la página.
referrerpolicy
Define qué información de la referencia será mostrada cuando se solicite el iframe.
src
La dirección de la fuente del elemento es incluida en él.
width
Establece el ancho (el tamaño automático es de 300 pixeles).
Ejemplos de elemento iframe
Como hemos visto, los sitios web suelen utilizan elementos iframe para incorporar recursos externos en una página web. Por ejemplo, aquí podemos ver un video de YouTube creado por HubSpot que podemos incluir mediante este llamado:
<iframe width="560" height="315" src="https://www.youtube.com/embed/S93nYy-Bxzo" frameborder="0"