Etiqueta Iframe

Los frames (frame en inglés significa marco) son unas herramientas que han tenido una historia dilatada en el desarrollo de páginas web con HTML. De ser una etiqueta no estándar ha pasado a ser soportada por todos los navegadores y formar parte de las especificaciones de HTML. Por otra parte, el frame siempre ha sido una utilidad para hacer páginas web de uso, cuando menos, controvertido, puesto que tiene ciertas desventajas que muchas veces son más importantes que la indudable practicidad.

En cualquier caso, en DesarrolloWeb.com ya hemos hablado suficiente sobre la etiqueta Frame y hemos tratado ampliamente sus ventajas e inconvenientes. En este artículo vamos a hablar de una etiqueta "hermana" que es a día de hoy mucho más usada, porque resulta más útil y menos problemática que los propios frames. Se trata de iframe, un tag incluido en las especificaciones de HTML 4.0.

Referencias sobre la etiqueta frame:

Frames en HTML
Ventajas e inconvenientes del uso de frames
Frames - Explicación básica
Control de frames en Javascript
Frames sin bordes
Frames - Atributos avanzados
Actualizar dos frames con un solo enlace
Crear variables o funciones globales a todos los frames
Frames - Una página en cada marco
...

En concreto iframe sirve para crear un espacio dentro de la página donde se puede incrustar otra web. Es un cuadrado cuyas dimensiones debe especificar el desarrollador en la propia etiqueta iframe, que tiene asociada una página web que se carga en dicho espacio. Esa página web tendrá sus propios contenidos y estilos, independientes del contexto donde se está mostrando. Además será perfectamente funcional: si tiene enlaces se mostrarán en ese mismo espacio y si tiene scripts o aplicaciones dentro se ejecutarán también de manera autónoma en el espacio reservado al iframe.

Ejemplos de uso de iframe

Iframe se utiliza en muchos contextos. Dentro de un iframe podemos mostrar contenidos de otras páginas, como si estuvieran en la nuestra, por lo que sirven para ejemplos como:

• Códigos de banner, que se invocan por medio de un iframe pidiendo los datos del banner generalmente a un servidor de banners que puede estar en otra red.
• Visualizar contenidos de terceros, como bloques de noticias o novedades que ofrecen en otras webs.
• Interfaces de usuario, en el que ciertas actividades se realizan de forma autónoma y el procesamiento está en otra página web.

Uso de iframe frente a frame

Actualmente la etiqueta iframe se utiliza más a menudo que la etiqueta frame, porque no da tantos problemas como esta. La diferencia principal está basada en que la etiqueta iframe no necesita una declaración de los espacios de los frames o frameset, porque se incrusta en el código HTML de la página. El iframe, por tanto, no provoca problemas de navegación, como los que ocurren con los frames normales si no se entra correctamente a través del frameset.

También, ya que no existe el frameset en los iframe, no adolece de los problemas del uso de frames, sobretodo a la hora en que la página es indexada en los motores de búsqueda.

Por decirlo de alguna manera, trabajar con iframe o frames flotantes es tan sencillo como hacer una tabla, que se codifica dentro de la maqueta HTML, con su espacio reservado dentro de la página. Así, la única diferencia con respecto a una tabla es que el contenido del iframe se extrae de otra página web.

Construcción de la etiqueta iframe

Como decimos, el iframe se coloca directamente en el código HTML, en el lugar donde queremos que aparezca.

Se colocaría con un código como este:

<iframe src="pagina_fuente.html" width=290 height=250>Texto para cuando el navegador no conoce la etiqueta iframe</iframe>

Como se ve, los atributos principales de iframe son la página web que se va a mostrar en el espacio y el ancho y alto del recuadro que reservemos para el frame flotante.

Como se puede ver, la etiqueta iframe tiene su correspondiente etiqueta de cierre. Todo el texto que coloquemos entre la etiqueta de inicio y la de cierre es texto alternativo, que sólo se mostrará en caso que el navegador del visitante no acepte la etiqueta iframe.

Todos los atributos de iframe

Estos serían los atributos disponibles para la etiqueta iframe:

src: Para indicar la página web que se mostrará en el espacio del frame flotante.

width: Para definir la anchura del recuadro del iframe

height: Para definir la altura del iframe

name: Para especificar el nombre del frame, que podemos utilizar luego para referirnos a él con el target de los links, o mediante javascript.

id: Para indicar el identificador del iframe, y poder referirnos a él desde javascript.

frameborder: para definir si queremos o no que haya un borde en el frame. Los valores posibles son 0 | 1. frameborder=0 indicaría que no queremos borde y frameborder=1 que sí.

scrolling: indica si se quiere que aparezcan barras de desplazamiento para ver los contenidos del iframe completo, en el caso que no aparezcan en el espacio reservado para el iframe. Los valores posibles son: yes | no | auto. El valor "yes" es para que aparezcan siempre las barras de desplazamiento o barras de scroll, "no" sirve para que no aparezcan nunca y "auto" es para que aparezcan sólo cuando son necesarias (es el valor por defecto)

marginwidth: Para definir el margen a izquierda y derechar que debe tener la página que va dentro del iframe, con respecto al borde. Este margen va en pixels, pero prevalecerá el margen que pueda tener asignada la página web que mostremos en el frame flotante.

marginheight: lo mismo que marginwidth, pero en este caso para el tamaño del margen por la parte de arriba y abajo.

margin: para especificar alineación del frame, igual que se especifica para las imágenes.

style y class: los atributos para definir el aspecto del iframe por medio de hojas de estilo css.

Para acabar, aquí vemos otro ejemplo de iframe con unos cuantos atributos más:

<iframe name=miframeflotante src="colabora.htm" width=400 height=550 frameborder="0" scrolling=yes marginwidth=2 marginheight=4 align=left>Tu navegador no soporta frames!!</iframe>