Iframes

Los frames son unas herramientas que han tenido una historia dilatada en el desarrollo de páginas web con HTML. De ser una etiqueta “no standard” ha pasado a ser soportada por todos los navegadores y formar parte de las especificaciones de HTML, para luego retirarse de nuevo del estándar en HTML5. No obstante, ha permanecido en uso, y dentro del estándar, una etiqueta hermana, que todavía hoy tiene mucha utilidad.

En concreto, “iframe” sirve para crear un espacio dentro de la página donde se puede incrustar otra web. Es un cuadrad cuyas dimensiones debe especificar el desarrollador en la propia página, incluidas por los atributos “width” y “height” en la propia etiqueta <iframe>.

El <iframe> tiene asociada una página web, que se carga en el espacio y operara de manera totalmente independiente (con los problemas de seguridad adyacentes). Esta página web tendrá sus propios contenidos y estilos. Además será perfectamente funcional: si tiene enlaces se mostraran en el mismo espacio, y si tiene “scripts” o aplicaciones dentro, se ejecutaran también de manera autónoma en el espacio reservado al <iframe>.

NOTA: hablamos de etiqueta hermana que es a día de hoy (noviembre 2016) mucho más usada, porque resulta más útil y menos problemática que los propios “frames”. “Iframe” fue un tag introducido en las especificaciones de HTML 4.0.

DONDE RESULTA UTIL

“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 manera autónoma y el procesamiento esta en otra página web.

• convertir una animación flash a HTML5, donde el código generado es demasiado largo y complejo como para añadirlo directamente sobre la página. De hacerlo así, el peso de la página aumentaría y sería mucho más difícil de indexar por los motores de búsqueda. La mejor solución a este caso, es añadir un “iframe”.

USO DE “IFRAME” CONTRA “FRAME”

Actualmente la etiqueta <iframe> se utiliza más a menudo que <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 “iframes”, no adolece de los problemas del uso de “frames”, sobre todo 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.

CONSTRUCCION DE LA ETIQUETA

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

<iframe src=’pagina.html’ width=’290’ height=’250’></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 el alto del recuadro que reservemos para el “frame” flotante.

Como se puede ver, la etiqueta <iframe> tiene su cierre. Todo el texto que coloquemos entre la etiqueta de inicio y de cierre, es texto alternativo, que solo se mostrar en caso que el navegador del visitante no acepte la etiqueta <iframe>.

ATRIBUTOS

Describiremos los tributos disponibles para la etiqueta <iframe>, no obstante, cabe señalar que algunos de los atributos se engloban más en el terreno de los estilos y por tanto se podrían, y sería más correcto especificar dentro de CSS.

• src: para indicar la página web que se mostrara en el espacio del “frame” flotante. En este atributo se indica la ruta en la que se encuentra el documento local o la URL de la página web a cargar en el marco. Es un atributo obligatorio.

  “src=’pagina.html’”

• name: aquí se le da nombre al “iframe”. Este atributo es imprescindible, si queremos direccionar los enlaces hacia la ventana del “iframe”. Para ello se utiliza el mismo mecanismo que antiguamente para los “frames”, atributo target=’nombre’ en el enlace, y atributo name=’nombre’ en el “iframe”.

  “name=’nombre’”

• width: para definir la anchura del recuadro del “iframe”. La anchura será en píxeles de la ventana donde se muestra el “iframe”. El valor puede ponerse también en porcentajes. Si no se ponen los atributos de anchura y altura, el documento se mostrara en una pequeña ventana cuyas medidas pueden variar dependiendo del navegador. También podemos definir la anchura y altura mediante código CSS.

  “width=’100px/20%’”

• height: altura en pixeles de la ventana donde se muestra el “iframe”. Sique las mismas normas que el atributo “width”.

  “height=’100px/20%’”

• 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 “iframe”. Los valores posibles son “0” y “1”. El primer valor indicaría que no queremos borde, y el segundo que sí.

  “frameborder=’0/1’”

• 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” y “auto”. El valor “yes” es para que aparezcan siempre las barras de desplazamiento, “no” sirve para que no aparezcan nunca, y “auto” es para que aparezcan solo cuando son necesarios (valor por defecto).

• marginwidth: para definir el margen a la izquierda y derecha que debe tener la página que va dentro del “iframe”, con respecto al borde. Este margen va en pixeles, pero prevalecerá el margen que pueda tener asignada la página web que mostramos 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 la alineación del “iframe”, igual que se especifica para las imágenes.

• align: tiene tres valores: “left”, “rigth” y “center”. Ajusta el contenido del “iframe” a un lado u otro de la ventana.

• sandbox: aquí se pueden especificar restricciones de seguridad en el acceso a los contenidos de la web que contiene el “iframe”.

• style y class: los atributos para definir el aspecto por medio de hojas de estilo CSS.

NOTA: a excepción de la directiva <iframe>, las demás etiquetas que se utilizan para establecer marcos, no son soportadas por HTML5. No obstante, los navegadores más utilizados en la actualidad, sí que las siguen interpretando correctamente.

Ejercicio-1