Etiqueta Iframe

  • Por
Explicamos detenidamente la etiqueta IFRAME de HTML y todos sus atributos, con algún ejemplo de uso.

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, para luego retirarse de nuevo del estándar en HTML5. No obstante, ha permanecido en uso y dentro del estándar una etiqueta hermana IFRAME que vamos a ver en este artículo, 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 cuadrado 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 operará de manera totalmente independiente. Esa página web tendrá sus propios contenidos y estilos. 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.

Nota: Si andas buscando información sobre los frames tradicionales, en DesarrolloWeb.com ya hemos hablado mucho sobre ellos y aunque ya no están dentro del estándar actual del HTML todavía los navegadores los interpretan, por compatibilidad con las páginas antiguas. Puedes comenzar la lectura en el artículo Frames en HTML.

En este artículo vamos a hablar la 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. IFRAME fue un tag introducido en las especificaciones de HTML 4.0.

Donde resulta de utilidad el 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

Ahora vamos a ver cuáles serían los atributos disponibles para la etiqueta iframe. No obstante, cabe ya señalar que algunos de los atributos que vamos a ver 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 las CSS.

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>

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Mondo

20/3/2008
¿Es posible que los atributos que definen un IFRAME se puedan definir en CSS?
es decir, sería algo así:

iframe {
height: 300px;
width: 300px
}

Petraworld

08/9/2009
Me ha ayudado mucho el artículo
Hola, soy estudiante de creación de páginas web y me ha ayudado mucho vuestro post, seguid asi!!!
Petra.

Katherine

20/9/2009
codigo
hola y el codigo java en la parte de arriba ya no va..?,,,solo es este?...

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

por favor. si me puedes ayudar.no me funciona solo...

cuervohcr

20/10/2009
java?
Cual codigo java?.... creo que te confundiste jajajjajajaja

David Aguirre

14/4/2010
Mas ejemplos de etiqueta iframe
Realmente no veo la ventaja de la etiqueta Iframe con respecto a la Frame ya que como dice que se puede colocar en cualquier parte de la página y que no necesita frameset, pero si lo que se va a anudar es un menú con enlaces,al momento de elegir uno se abrirá en la misma sección del menú y no en la parte mas amplia.

O como se resolvería este caso? La etiqueta Iframe acepta el atributo target?

alex

14/9/2010
align o margin
para alinear los frame dice que se uso el argumento margin, tal como en las imágenes...
Luego en el ejemplo se usa align, lo que es mas lógico.

PD: Decir si queréis que deje de mandar todos esos mensajes. Es para mi una forma de agradeceros el trabajo

Lancro

21/10/2010
Pero donde sale el iframe
En la esquina superior izquierda, se puede definir, en esta parte os faltan ejemplos, voy a tener que inventarme algo yo para verlo funcionando.

Saludos.

People

15/2/2014
Como usarlos???
Oye, no se como se usan los frames sin perder listas

buggy

13/5/2014
iframe
por que en un iframe no puedo insertar mas codigo, hay un limite.

diego

19/9/2014
Uso de iframe
¿cómo puedo comunicar el codigo que esta dentro de el iframe con el codigo de mi html principal?
es decir que las acciones que ejecute dentro de mi iframe tengan un efecto en mi html.

Mike

18/6/2015
Tamaño
Cuando he querido poner valores de porcentajes en el width y height sólo lso toma como válidos en el width mientras que en el height simplemente no lo toma en cuenta. ¿Hay manera de hacer que el iframe se adapte a la pantalla y no sea valores absolutos de pixeles?

Ignacio

11/7/2015
Incrustar Facebook Page Plugin en mi web
Buenas noches,

Desde hace algun tiempo etoy tratano de incrustar mi perfil de facebook en mi web, pero a pesar de seguir las instrucciones de facebook developer, no consigo más que me aparezca un enlace a facebook.

Alguien sabe qué he de hacer para que se vea el trozo de facebook directamente en mi web?

Gracias y saludos!

Jose Manuel

11/7/2015
El iframe lo puedo usar con un documento php
de esta forma si es posible o como lo hago iframe ="java/wo.php" no me funciona pero es una pagina o solo es en formato html osea iframe = "java/wo.html" ayuda please.

MrJunos

31/7/2015
IFrame y Css
Si yo uso la etiqueta iframe, de que módo esta podría heredar los atributos css de la página "madre" ? Gracias
O no es posible?

Rodri

11/12/2015
Cargar un div de otra página
Buenas noches.
Me parece interesante el uso de esta etiqueta y muy fácil de usar, pero tengo un duda; sería posible cargar un div, no toda la página, sino solo un div concreto de otra página? cómo se haría? Esto intentando de todas las maneras posibles pero no doy con la forma.

Gracias y saludos