Marcos: los iframe
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>
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