HTML 5: los «malditos» iframes

Aunque es uno de los elementos que se utilizan todavía, la verdad es que el consumo que provoca en los navegadores es tan alto que si nos paramos a pensar fríamente, no es nada recomendable su uso… aún así, el HTML 5 todavía lo mantiene ya que para algunas cosas sigue siento un elemento valioso (aunque, como digo, yo no lo recomiendo, ni yo ni Google ni Yahoo!…)

iframe

El elemento iframe básicamente permite integrar lo que se podría decir como una ventana de navegador dentro de otra, o sea, una página dentro de otra, en un espacio definido. De esta forma podemos abrir el contenido de una página propia o externa dentro de una parte de la que actualmente visualizamos.

El principal atributo que lo acompaña es el src que como en muchos otros elementos, hace referencia a una dirección URL, que será la página que abrirá dentro. También se le puede indicar el srcdoc que hace referencia al nivel de profundidad que tendrá el elemento. El atributo name hará referencia al nombre del elemento (por si hay que acceder a él a través del DOM).

Uno de los mayores problemas que tienen los iframes es la seguridad que puede comportar abrir «cualquier» elemento externo a nuestro sitio. Es por esto que existe el atributo sandbox (al que por ejemplo ya da soporte Google Chrome) y que restringe algunas acciones. Algunos de los valores que puede generar excepciones son:

• allow-same-origin
• allow-top-navigation
• allow-forms
• allow-scripts

<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.example.com/incrustado.html"></iframe>

Otro atributo que parece muy interesante es seamless. Con este atributo le decimos al navegador que «renderice» el contenido del iframe como si fuera parte del sitio. Esto implicará que haya algunas restricciones y ampliaciones, como que el contenido ha de estar en el mismo dominio, que los CSS que haya en el iframe pasarán a formar parte del CSS principal…

Para acabar, y como es lógico, hemos de indicar el tamaño de la ventana, y para ello utilizaremos los atributos width y height, que indicarán el ancho y alto de la ventana.

Sin duda el elemento iframe va a ser uno de los más criticados por los buscadores y optimizadores de la red, pero parece que va a seguir aquí durante bastante tiempo.