Los iFrames forman parte del estándar HTML desde hace mucho tiempo. En HTML 4.0, sin embargo, se incluyeron en la variante HTML frameset junto con los ahora mal vistos marcos. Los marcos ya no se incluyen en HTML5, pero sí los marcos incrustados (iFrames).
A través de los iFrames se pueden integrar otros sitios web. Así, el navegador renderiza otro archivo HTML dentro de la página web actual. El contenido de la ventana iFrame puede formatearse individualmente.
Si se utilizan iFrames, también hay que tener en cuenta la seguridad de esta tecnología HTML. Uno de los problemas es el código malicioso que puede infiltrarse inadvertidamente en los sitios web a través de iFrames. Esto es, por supuesto, una gran molestia.
En HTML5, sin embargo, existen ahora mecanismos de seguridad apropiados que pueden utilizarse para eludir estos problemas. Más sobre esto más adelante en este tutorial. Antes de usar iFrames, sin embargo, es importante tener en cuenta que son potencialmente peligrosos, especialmente porque los nuevos atributos de seguridad aún no son soportados por todos los navegadores.
En HTML5, los iFrames son por tanto un estándar fijo y traen consigo algunos atributos adicionales. El siguiente ejemplo muestra cómo pueden definirse los iFrames.
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
En el navegador, el resultado es el siguiente
El atributo src se asigna al elemento iframe. Este src contiene la página que se mostrará como valor. Puede ser un archivo local. Sin embargo, también es posible -como en el ejemplo mostrado- llamar a un recurso externo.
Los dos atributos width y height se utilizan para determinar la anchura y la altura del iFrame. Si el contenido integrado es mayor que el tamaño especificado del iFrame, se muestran barras de desplazamiento.
Se puede definir cualquier contenido entre la etiqueta de apertura y la de cierre <iframe>. Sin embargo, éstos sólo pueden verse en los navegadores que no reconocen el elemento iframe.
En HTM5, se introducen algunos atributos nuevos en relación con los iFrames, que tienen que ver principalmente con el denominado comportamiento sandbox.
En los navegadores, la Política del Mismo Origen garantiza que un sitio web incrustado no pueda ser manipulado mientras se muestra. Esta función de seguridad tiene mucho sentido. Sin embargo, no siempre es ideal. Por eso se introdujo en HTML5 el atributo sandbox, que puede utilizarse para indicar explícitamente a los navegadores qué autorizaciones deben asignarse al contenido incrustado desde una página externa en un iFrame.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
Los iFrames con el atributo sandbox no tienen acceso al DOM del sitio web incrustado. Tampoco pueden ejecutar scripts ni guardar cookies. Estas restricciones pueden ser anuladas por varios valores de sandbox.
Se pueden asignar diferentes valores al atributo sandbox. Permitir formularios permite al sitio web incrustado obtener información del usuario a través de formularios. Los usuarios no se dan cuenta de que el formulario no procede de la página actual.
Si, por el contrario, se especifica allow-some-origin, el sitio web incrustado se trata como si procediera del mismo host. Este valor anula la política del mismo origen.
El valor allow-top-navigation permite que el contenido incrustado cambie el contenido del contexto de navegación superior.
Y luego está allow-script. Esto permite que el sitio web incrustado contenga JavaScript que pueda manipular la página incrustada.
He aquí un ejemplo de lo que podría ser una instrucción sandbox correspondiente
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
También puede asignar varios valores. Estos deben estar separados por espacios. He aquí otro ejemplo:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.psd-tutorials.de/"> </iframe>
Los iFrames se diseñan normalmente para incrustar contenido externo. Como alternativa, también se pueden incluir.
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
Este atributo tiene mucho que ofrecer. A menos que se defina lo contrario, los objetivos de referencia del documento incluido se muestran en la ventana del navegador en la que se definió el elemento iframe. (Con la incrustación normal, los objetivos de enlace se muestran en la ventana del iFrame a menos que se defina lo contrario).
Actualmente, el iframe sólo es compatible con Google Canary, es decir, la versión para desarrolladores de este navegador.
El otro efecto afecta a las hojas de estilo. Esto se debe a que las hojas de estilo del archivo incluido también se aplican al documento incluido. (Sin embargo, las especificaciones de las hojas de estilo no se aplican a la inclusión normal).
Se ha añadido otro nuevo atributo. Con srcdoc puede definir directamente el contenido que se incluirá. Eche un vistazo al siguiente ejemplo:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc=" <script> top.location.href=" http://www.psd-tutorials.de/" </script>"> </iframe>
En este caso, falta el atributo src, que por otra parte se utiliza para especificar el archivo que se va a incluir.
El contenido especificado mediante srcdoc se trata como si procediera de un servidor de terceros. Por tanto, está totalmente sujeto a la Política del Mismo Origen. Este comportamiento es interesante en relación con las definiciones de script, por ejemplo. Se permite cualquier código HTML y JavaScript. Sin embargo, las comillas y el símbolo ampersand deben describirse mediante los caracteres de nombre " y & respectivamente.
También puede definir aquí directamente una página y emitir así el contenido deseado.
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc=" <!DOCTYPE html> <html> <head> <title>PSD-Tutoriales.es</title> </head> <body> <p>...</p> </body> </html>"> </iframe>
Por cierto, esto no tiene por qué ser un archivo HTML completo. Algo como esto también es posible:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
En el navegador se ve así:
Esta es la sintaxis HTML normal, sin scripts, etc.
Algunas notas más sobre los atributos que se utilizaban anteriormente para el diseño visual: Cosas como el desplazamiento, marginwidth y marginheight ya no están permitidas en HTLM5. Estos atributos se sustituyen por CSS.
