iframes vs frames.

Todo el mundo creo que conoce a estas alturas mi escasísimo interés por los frames debido a sus problemas tanto de uso como de programación y diseño (dificultan la navegación,impiden guardar páginas en favoritos, el usuario no sabe realmente en qué dirección se encuentra...). Sin embargo los iframes puede que me hagan cambiar en una pequeña medida.

El iframe se encuentra a medio camino entre los layers, las imágenes y los frames de toda la vida: permite insertar otra página dentro de la actual, para lo que anteriormente había que crear primero una página "contenedora" o frameset (en la que se declaraban cada uno de los frames) y su "fuente" (documento o página que debía abrirse en él).

Ahora, simplemente habrá que colocar las etiquetas <iframe>... </iframe> dentro del documento en que estemos trabajando, asignar los valores correspondientes (que luego veremos) y automáticamente tendremos insertado un frame en nuestro documento actual.

Vamos a ver un ejemplo:

Pincha aquí para ver el documento del iframe

¿Cómo se hace?
Para este iframe, solo he tenido que insertar, en el lugar donde quiero que aparezca, este código:

<iframe name="prueba" src="iframe_content.html" >
Si lees esto, tu navegador no soporta iframes ( IE4, IE5 y NS6 solamente)
</iframe>
Donde "prueba" es el nombre del iframe (lo que nos servirá para hacer enlaces (mediante "target")al mismo: Pincha aquí para cambiar el contenido del i-frame superior

El código del enlace es:
<a href="iframe_content2.html" target="prueba">
Pincha aqui para cambiar el contenido del i-frame
</a>

Bueno, ahora que sabemos cómo se hacen, ¿qué otros atributos pueden tener?. Aquí mostraremos algunos de ellos, principalmente los que han mostrado total compatibilidad con Explorer y NS6 (aunque algunos no están aceptados como HTML4)

1.- align: que podrá llevar los valores que se utilizan para alinear una imagen:

por ejemplo:

Llevaría el código:
<iframe name="prueba2" src="iframe_content.html" align="right" >
Tu navegador no soporta iframes...
</iframe>

De todas formas en algunas circunstancias es recomendable utlizar las etiquetas <div align="posicion">....</div> envolviendo al iframe, para conseguir mejor compatibilidad con NS6, sobre todo si se trata de alinear al centro.
ejemplo:

<div align="right">
<iframe name="prueba2" src="iframe_content.html">
Tu navegador no soporta iframes...
</iframe>
</div>

2.- Scrolling ( yes, no auto): Según queramos que nos aparezcan o no barras de scroll. Si no ponemos nada, tomará el valor "auto"

3.- width / height Nos permitirán indicar la altura y anchura del iframe

4.- marginwidth/marginheight: indicarán la separación de los márgenes (es decir, del borde el iframe al borde de la página cargada dentro de él.

5.-frameborder: indica el ancho del broder del iframe (igual que en los frames normales)

Estas etiquetas funcionarán correctamente en los 2 navegadores que soportan iframes: NS6 e IE4 y superiores (no he podido comprobar otros, como Opera)

Para terminar: un ifame con casi todo lo que hemos visto: ëste es el código:

<div align="center">
<iframe name="prueba3" src="iframe_content.html" width="400" height="300" marginwidth="50" marginheight="50" frameborder="0">
tu navegador no soporta iframes
</iframe>
</div>

Y el resultado es: