Cómo no usar más iframe

12/nov/2007 22

Estuvieron de moda. Fueron la sensación. Pero como muchas otras etiquetas, perdieron su reinado dado a que no eran accesibles y mal indexado por los buscadores. Pero no totalmente, ya que suelen ser bastante útiles para refrescar datos dinámicos, sin tener que hacer un reload del sitio completo. ¿Te suena esta teoría de algún lugar? ¿Quizás de AJAX? Esa sigla tan de moda y que vende más que detergente o equipo de fútbol holandés, puede utilizar 2 recursos para realizar sus consultas a servidor asincrónicamente. Una, es el objeto XMLHTTPRequest (propietario de Microsoft); la otra, es IFrame. Esas ventanas modales (lightbox, greybox, thickbox) suelen utilizar iframe‘s para abrir otros contenidos dentro de la misma página, sin tener que volver a cargarla, evitando también el ya obsoleto popup. Así que no estaba tan muerta del todo esta etiqueta…

Bueno, pero la idea es evitar su uso dentro de contenidos, para así impedir la limitada acccesibilidad que nos entrega (no todos los browsers lo interpretan) y que sea indexado separadamente por los buscadores (así como ocurre con los <frame>, que tienen la misma lógica). Mediante CSS lograremos el mismo fin, el de poder diagramar un espacio donde el contenido fluya a través de scroll vertical. Pero todo dentro de la misma página.

El HTML no será nada distinto a un bloque de texto cualquiera, soportado por un <div>:

<div id="contenido_scroll">
     <p>Morbi non erat non ipsum pharetra....</p>
     <p>Pellentesque habitant morbi tristique.....</p>
</div>

A través de CSS veremos reales cambios. Primero, al igual que en la etiqueta <iframe>, definiremos alto y ancho fijo. Todo lo que se salga de ese alto será absorbido por una elegante barra de scroll, la que será mostrada mediante la propiedad overflow: scroll;

#contenido_scroll {
     width: 300px;
     height: 200px;
     overflow: scroll;
}

Ver ejemplo 1

Eso es todo. Muy simple. Ahora, existe otra propiedad CSS no muy difundida que es overflow-x: hidden; Con ella, lograremos que desaparezca la barra horizontal de scroll, o la vertical con overflow-y: hidden; Pero esta propiedad no valida en CSS2.1, sólo lo hará con CSS3, pero felizmente es soportada por todos los browsers importantes exceptuando Opera (que es un muy importante browser). Una lástima, pero la realidad es que ¡sí es soportado por IE6! ¡¡A celebrar!!

Ver ejemplo final

Comentarios

  1. Markp [#]

    Muy bien, como siempre, Me gusto tbn el rediseño, muy optimo por lo que veo.

    Una pregunta como te contacto para proyectos especiales de algun tipo y/o capacitaciones? Me gustaria trabajar contigo.

    Saludos.

  2. CSSLab Admin [#]

    Markp, usa el form de contacto para ello de ahi seguimos la conversacion. no es conveniente mostrar mi email publicamente, a los spambots les encantaria. Saludos.

  3. Victor San Martin [#]

    No tenia idea que overflow-x o overflow-y no eran soportadas por opera, y tan buen navegador que es.

    En fin uno aprende cosas todos los días, buen articula.

    Saludos

    PD: me gusto el diseño, fue un cambio de plantilla radical, de todas formas extraño el antiguo, jejeje.

  4. matias [#]

    Porque todos repiten como loros que no hay que usar iframes? QUIEN LO DICE?. Los navegadores tales como Firefox, IE 6 y 7 y Opera (por nombrar solo algunos navegadores mas usados) lo interpretan correctamente. Por otro lado existen Javascript para que se evite que un iframe se abra por separado de su pagina contenedora.

  5. CSSLab Admin [#]

    Matias, no se trata de q no se DEBA utilizar, no se recomiendan porq los buscadores pueden indexar su contenido separado del contexto al cual esta siendo utilizado. De hecho o hacen. Por ejemplo, si tienes tu index.html q tiene un iframe llamando a un noticias.html, los spiders de los buscadores indexaran las noticias separadamente desde donde estan siendo llamadas, y seran direccionadas a noticias.html y no a la index.html, se entiende? Salu2.

  6. Arcadio [#]

    exelente

  7. Claudio G. [#]

    Solo quiero destacar, que XMLHTTPREQUEST no es de Microsoft, sino también lo serian los documentos XML, ellos quisieron tener su propio formato de xml, pero no les resultó.
    También creo que no hay que centrarse solo en los 3 navegadores más usados, también hay los de Mac que no son exactamente iguales a los de PC.
    También creo que existen problemas de seguridad para los sitios que usan iframes, también con sus antesesores los frames.

    Saludos

  8. jävi [#]

    En primer lugar felicitarte por el blog, el diseño es genial =)

    Llegué hasta aquí buscando info a cerca de los iframes, pues me he visto obligado a trabar con ellos, y es que, a día de hoy, los iframes son la única forma de hacer formularios para subir archivos con “ajax”.

    El objeto XMLHtttp no soporta ficheros en formularios, (en realidad los soporta pero en muchos navegadores se ha de cambiar la configuración de seguridad por defecto, así que no es útil realmente). En este caso, el iframe es la única salida para subir ficheros asincrónicamente.

    Saludos!

  9. carlos [#]

    Gracias. No sabía lo del overflow.

  10. Emilio [#]

    Cómo se hace para que se abran enlaces de la página en ese iframe?
    Gracias

  11. Pablo [#]

    Muy bueno el tutorial, ahora te consulto como hago si quiero hacer una DIV al lado, paralela, a otra, como si tuviese una tabla dividida en 2 columnas?
    Y si le quiero dejar un expacio x entra cada una?
    Muchas Gracias desde ya!
    Pablo

  12. m_79 [#]

    Emilio [19 de Junio del 2008 a las 2:37 pm ]
    citado:
    “Cómo se hace para que se abran enlaces de la página en ese iframe?
    Gracias”

    Yo necesito saber los mismo porfavor

  13. Jorge Epuñan [#]

    Emilio, m_79: no pueden abrir paginas enteras aqui dentro ya q para eso inventaron los iFrame; con esta tecnica solo los estamos simulando ese efecto pero mediante codigo que valide. Ahora, para abrir enlaces de la misma pagina dentro de ese div, basta con usar un poco de JS (jQuery por ej.):

    $(‘#id_boton’).click(function(){
    $(‘#id_div_iframe’).html(‘<p>hola</p>’);
    });

    Saludos.

  14. Andres [#]

    y como hago para que el contenido sea otra pagina web al igual que en el iframe?

  15. c.bautista [#]

    Andres tal vez lo resuelvas usando:

    así citas una pagina (.PHP) y te deshaces de que los buscadores separen los contenidos, ya que están trabajando a la par’ aunque no se reocmienda citar una pagina completa, eso depende del tamaño total de la pagina asi como del tamaño que este usando con esta técnica, es decir si vas a citar alguna pagina que contenga tablas sencillas, alguna imagen, o un texto es recomendable, pero como bien dijo Jorge Epuñan, para citar paginas en su totalidad se inventaron los IFRAME, pero por recomendación veo inecesario hacer esto, asi es que puedes “organizar” tu contenido usando algun script PHP para separar por paginas tus contenidos, y lograr que los buscadores lean el contenido TOTAL. saludos.

  16. c.bautista [#]

    me falto el codigo

    include(“s_visitas/activos.php”)

    usando la aberturas de los scripts php

  17. Nusesabe [#]

    Bonito tutorial de como poner un scroll en un div, pero “como no usar iframe”… el que ha hecho esto no sabe lo que es un iframe por lo visto…

  18. Jorge Epuñan [#]

    Nusesabe: como bien dices, esto esmas bien como usar scroll en un div o quier otro elemento HTML; pero la verdadea funcion de un iFrame puedes suplentarla utilizando tecnicas modernas de JS. iFrame es muy antiguo, no valida y existen mejores maneras de manejar datos asincronicamente.

    Salu2.

  19. allex [#]

    como faço para abrir varias paginas html, uma por vez dentro de uma div apartir de um menu

  20. Castrovirreyna [#]

    Como ya otros han anotado, este articulo no es de “como NO usar un iFrame”, sino de como crear un DIV con scroll.
    Y no flaco, esa no es “la verdadera funcion de un iFrame” y no se puede reemplazar con “tecnicas modernas de JS”.
    Un iFrame es para enlazar con un origen HTML independiente (su verdadera funcion) y su uso mas extendido es el de mostrar otras paginas dentro de otra pagina. Por ejemplo, en una modernisima pagina de Google Maps, encontraras esto:

    A ver como lo reemplazas con “tecnicas modernas” de JS. Entre tanto, no pasa nada, si pones un titulo mas adecuado a esta entrada, creo que todos contentos

  21. auto insurance quotes Campbell CA [#]

    Great Job Noup! Your support is helping scientists like Emily study Wood thrush so that we can all protect this incredible song bird!VN:F [1.9.10_1130]please wait…

  22. free car insurance quotes Boulder CO [#]

    Woah this blog is great i love reading your posts. Stay up the great paintings! You realize, a lot of people are searching round for this info, you could help them greatly.

Responder a Nusesabe ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab