Los iframes son elementos HTML que ofrecen la posibilidad de incrustar un documento HTML en el documento actual. Este elemento utiliza las etiquetas <iframe> (de apertura) y </iframe> (de cierre). Mediante sus atributos se especifica la página web que se desea incrustar y las medidas (ancho y alto) que permiten definir la zona rectangular que mostrará la página incrustada.
Ejemplo de código HTML del elemento <iframe>:
<iframe width='425' height='250' importance='low' src='https://www.openstreetmap.org/export/embed.html?bbox=2.1146401762962346%2C41.38871645847147%2C2.118180692195893%2C41.39043091883323&layer=mapnik'>Texto descriptivo.
</iframe>
En el ejemplo anterior incrustamos un mapa de OpenStreetMap en una región rectangular de 425×250 píxeles. El valor del atributo src es la URL del mapa: en este caso, la ubicación del Barcelona Supercomputing Center. Los atributos width y height definen las dimensiones de la región. Resultado:
Generalmente, se puede omitir el contenido que va entre las etiquetas de principio y fin (<iframe> y </iframe>). Pero si se desea, se puede incluir un texto alternativo que aparecerá en los navegadores que desconozcan este elemento. Este texto debería ser una descripción para que el usuario esté al corriente de la página incrustada. También puede ser útil repetir la URL de la página incrustada, así aparecerá un enlace directo para que puedan acceder explícitamente a este contenido.
Navegación y rendimiento
Es importante señalar que cada elemento <iframe> tiene su propio historial de sesión y su propio objeto Documento, y por tanto tiene de forma implícita su propio contexto de navegación, llamado ‘contexto de navegación principal’. Por su parte, el contexto de navegación del documento actual (el más superior) normalmente es la ventana del navegador, representado por el objeto Window.
Por tanto, por cada <iframe> que introducimos en un documento HTML, estamos incrustando también un contexto de navegación, es decir, un entorno completo de documento. Esto provoca que por cada <iframe> se requiera más memoria y otros recursos informáticos. Esto significa que si se introducen demasiados elementos <iframe> pueden aparecer problemas de rendimiento.
Atributos
El atributo src es el más importante, ya que en él se especifica la URL que se quiere incrustar en el documento HTML actual. Debe ser una URL válida.
Los atributos width y height permiten definir las medidas de la región rectangular que deberá ocupar la página incrustada en el documento actual. Los valores de estos dos atributos deben ser en píxeles, como valores enteros sin la unidad.
Con el atributo importance se puede definir la prioridad de descarga del documento HTML incrustado. Sus valores pueden ser: auto (por defecto), high (se descarga antes que otros recursos de la página) y low (se descarga después de otros recursos). Este atributo puede aportar una mejora en la velocidad de carga.
Estilos
En HTML 4.01 existieron algunos atributos que permitían modificar la apariencia de los elementos <iframe>, pero muchos de estos atributos quedaron obsoletos en HTML5. Algunos de ellos eran: frameborder, scrolling, marginwidth, marginheight y align. Actualmente se usa el CSS.
Con el atributo style o directamente en un documento CSS podemos modificar el borde con la propiedad border y un valor. Por ejemplo, si queremos eliminar el borde del rectángulo: style='border:0'. También podemos hacer con un grosor de 5 píxeles y de color rojo: style='border:2px solid red'.
Además, tal y como sucede con la mayoría de elementos HTML, podemos usar los atributos id y class. Mediante estos dos atributos podemos indicar un selector como valor que luego usaremos en las hojas de estilo en cascada (CSS) para aplicar cambios de aspecto del <iframe> sin ninguna limitación.
Para evitar confusiones
En ocasiones, el elemento <iframe> se confunde con los elementos <frame> y <frameset> —obsoletos en HTML5—, pero su funcionamiento era algo distinto: lo que hacían era dividir la ventana del navegador en múltiples secciones, y en cada sección se cargaba un documento HTML por separado.
Esta práctica tiene ciertas desventajas, como que los buscadores no pueden leer el contenido de todos los marcos, el botón de ir atrás del navegador no funciona como se espera, o puede que los marcos no quepan en pantallas pequeñas como móviles, ni es responsive. Por eso quedaron obsoletos en favor de <iframes>.
