Marcos: los iframe

El estandard HTML 5 no acepta los marcos o frames usados en la anterior versión de este lenguaje para organizar varias páginas en una única ventana (una página contenedora con varias páginas hijas), pero mantiene la alternativa introducida por Iexplorer, los iframe, aunque no contempla los mismos atributos, que deben sustituirse por reglas de hojas de estilo CSS.

Este elemento permite mostrar una página web dentro de otra. Este marco puede ser colocado en cuaqluier parte de la página usando adecuadamente los estilos CSS. Es algo parecido a lo que en programación sería un include o import.

La configuración de este elemento es muy simple, lo único imprescindible es el atributo src para indicar la página que debe incluirse dentro del iframe. Además por supuesto admite cualquier definición de estilo CSS, por lo que podrás configurar sus dimensiones, bordes, márgenes.... Es usada, por ejemplo, para colocar anuncios, en las páginmas de juego suele usarse para colocar juegos en la página.

Los atributos usados en este elemento son los siguientes:

Atributo Uso
height Altura del marco en pixels
width Anchura del marco en pixels
name Asigna un nombre a un marco, de esta manera luego podemos usarlo como destino de un enlace.
sandbox Conjunto de restricciones para el contenido del marco
src Indica la URL del documento HTML que se verá en el iframe.
srcdoc Es código HTML que se mostrará en el <iframe>
en lugar de una página externa
seamless Trata el iframe como parte de la pagina contenedora, por ejemplo, para aplicar estilos de la página contenedora o permitr el acceso a ésta desdel el iframe.

El nuevo atributo sandbox es un elemento de seguridad para evitar ataques o puntos débiles ante ataques crossdomains. Puede usarse sin ningún valor, con lo cual se aplican todas las restricciones al contenido del iframe. O se le puede asignar una lista de valores para levantar una o varias restricciones.

Si el contenido es de tu mismo dominio, una página que tu controlas, realmente el riesgo de ataque mediante contenido es mínimo o incluso nulo. Pero si el contenido es una página de otro dominio, y tu no controlas su contenido, el riesgo es máximo, pues en esa página podría existir código que se ejecutaría en tu dominio sin tu control, un ataque crossdomain. Sandbox permite encerrar el iframe en una especie de caja fuera de la cual no puede hacer nada. Es un contenido puramente estático.

Los valores que acepta el atributo sandbox son :

Valor Uso
allow-forms Admite envio de formularios dentro del iframe
allow-pointer-lock Habilita el uso de API,s desde el iframe
allow-popups Habilita Pop-ups
allow-same-origin Considera el iframe como del mismo origen que la página contenedora. Esto permite que el iframe acceda al DOM de la página contenedora
allow-scripts Permite ejecución de scripts
allow-top-navigation Puede cambiar el origen de la página contenedora.

Un ejemplo que puedes probar en el editor de aprendizaje

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Un ejemplo de ifrma con página externa</title>

</head>

<body>

<iframe src="/tutorhtml5/ejemplos-html5/ejm_iframe_cont.htm" width="400" height="180" style="border: 2px solid red">

</iframe>

</body>

</html>

Este es un ejemplo simple de como usar el iframe

Como ves el elemento no tiene contenido, todo sus datos están en los atributos Observa el elemento style para definir un borde igualmente podrías establecer por ejemplo un color de fondo. El estilo lo puedes también asignar mediante el atributo class, utilizando un estilo predefinido.

Siempre que veas un ejemplo te recomiendo que lo pruebes en tu editor y vayas creando una colección de ejercicios simples para consultar y probar. Este ejemplo lo puedes ver también funcionando en ejercicio de iframe

Los iframe permiten el uso de ua página externa dentro de tu página lo que puede ser útil para compartir un menú por todas las páginas de un sitio