Deja de usar iframes

28.6.08. Por ooscarr (ooscarr)
Maten a Internet Explorer

Ustedes saben. Los frames y los iframes desaparecieron de la especificación XHTML a partir del XHTML 1.1. Entonces, si necesitamos embebeer contenido de otra página en la nuestra, ¿cómo lo haremos?

Si es sólo por presentación, usa CSS

Si quieres poner un iframe sólo para que se vea la barrita de desplazamiento dentro de la página, deberías usar hojas de estilo como en el bloque de noticias como aparece en la siguiente página:

Para lograr ese efecto sin usar iframes, primero encerramos la parte que queremos en, digamos, un <div>:

<div id="extras">Esto después debería lucir como si
estuviera dentro de un viejo iframe</div>

Y para que se vea con la barrita de desplazamiento, le aplicamos el estilo overflow, por ejemplo:

#extras{
 height : 230px;
 width : 200px;
 overflow : auto;
}

Si es muy necesario cambiar su contenido sin actualizar la página, podrías usar métodos javascripts como el XML HTTP Request.

Un objeto HTML

Si es necesario usar el viejo iframe, existe la solución de usar un objeto de tipo HTML embebido dentro de la página.

Por ejemplo, a continuación debería aparecer un pequeño convertidor de divisas:

No se pudo mostrar el convertidor de divisas en esta página. Visita finance.google.com.
Prueba presionando el botón Convert.

Éste es el código:

<object type="text/html"
data="http://finance.google.com/finance/converter?
from=USD&amp;to=CLP&amp;auto=1"
width="400" height="150"
style="border:1px solid #000;">
 No se pudo mostrar el convertidor de divisas en esta página.
 Visita <a href="http://finance.google.com/finance?q=usdclp"
  rel="external">finance.google.com</a>.
</object>

Internet Explorer

Lo anterior no funciona en Internet Explorer. En vez de mostrar un formulario para convertir divisas, sólo apareció el objeto con una página en blanco.

Internet Explorer preguntando si deseo ejecutar código externo
Internet Explorer cree que todos los object son elementos ActiveX. :-/

Internet Explorer bloquea el contenido embebido de otros dominios (incluso entre subdominios distintos), excepto si el HTML se está ejecutando bajo localhost. Según ellos, por razones de seguridad, y puede ser que estén en lo correcto en tratar a este objeto como un elemento independiente... Hmm... Los desarrolladores también dijeron que puede ser que eliminen esta restricción en futuras versiones beta de Internet Explorer 8. Esperemos.

Resultado de Acid2 mirror en Internet Explorer 8
Esta es la razón por la que IE8 pasa el Acid2 test desde www.webstandards.org y no desde acidtests.org, ni desde webstandards.org (sin las www).

Así que el método de objetos sólo funcionará para páginas del mismo dominio bajo Internet Explorer.

Internet Explorer además muestra unas extrañas barras de desplazamiento y un borde cuando incrustamos objetos HTML. Para deshacernos de éstos, hay que definir los siguientes estilos dentro de las páginas a embeber:

html {
 overflow: auto;
 border: none;
}

No se pudo mostrar el hola, mundo.
Se debería ver en Internet Explorer.

Internet Explorer, adicionalmente, no reconoce que un link dentro de la página incluida tiene a la página que la contiene como su _parent. Prueba haciendo click en el botón XHTML 1.0 que está dentro del objeto anterior y compara dónde se abre la página. Así que sumemos motivos para odiar a IE.

Pruebas en otros navegadores

Una página francesa hizo la prueba en los navegadores más populares de su época la manera en que cargan este y otros tipos de objetos, y estos fueron sus resultados:

User AgentResultado
Fuente: http://joliclic.free.fr
Firefox 1.5success
Firefox 1.0.7success
Opera 9success
Konqueror 3.5.2success
Safari 2.0.4success
IE 7RC1success
IE 6success
IE 5.5success
IE 5.0.1success
IE 4.0.1success
IE Mac 5.2.3success
Lynx 2.8.5degrade correctly

Yo le agregaría

User AgentResultado
Firefox 2.0.0.14success
Firefox 3success
IE8 beta 1success
Opera 9.5success
Safari 3.1.1success
iPhone 1Gsuccess

Al usar este método de objeto, también desaparece el soporte de abrir un link directamente dentro del objeto desde afuera como se podía hacer antiguamente con los iframes a través del desechado atributo target.

XFrames?

El tercer método no lo sabemos. Así como el W3C desechó los formularios con <form> en favor de los Xforms, a partir del XHTML 1.1 los frames ya no son soportados en favor de los Xframes.

Xframes es una redefinición de los framesets, que permite definir el contenido de los frames desde la URI para así no echar a perder el botón de retroceso o las direcciones guardadas en marcadores, además de facilitar el trabajo de los buscadores. Pero nada se dejó como alternativa al pobre iframe, por ahora.

En resumen

Evita usar iframes. Aparte de que son inseguros, pasados de moda y próximamente obsoletos; lo más recomendable es programar la forma de reusar código en un lenguaje de programación interpretado en el servidor.

Pero si hay que usar iframes,

  1. Si el contenido es del mismo dominio y no se cambiará desde la página contenedora, el objeto HTML debería ser la solución.
  2. Si se desea cambiar el contenido de las páginas incluidas, las llamadas javascript HTTP Request (em, como AJAX) podrían ser una alternativa.
  3. Si se desea incluir contenido externo sin olvidar a Internet Explorer, no quedará otra que seguir usando iframes (con algún DOCTYPE antiguo o transicional). O utilizar los comentarios especiales <!--[if IE]> e <!--[if !IE]> <--> como lo he hecho en mi recién inaugurado formulario de comentarios.

Referencias

Artículos relacionados

Etiquetas: , ,

7 comentarios (RSS ATOM) :

  1. A las 1/3/09 15:21  

    Blogger GunJoaquin ha dicho...

    Muy bueno lo que explicas

  2. A las 12/9/09 21:31  

    Anonymous Anónimo ha dicho...

    Gracias, estoy estudiando algunas tecnologias webs y lo que explicas me es util.

  3. A las 12/9/09 22:57  

    Blogger ooscarr ha dicho...

    Entonces te servirá saber que XHTML2 fue abadonado por el W3C y en HTML5 el iframe se queda.

  4. A las 2/12/09 15:05  

    Anonymous Anónimo ha dicho...

    tengo una duda casi existencial...
    tengo una pagina con un iframe central, que carga la pagina que corresponda.
    ejemplo: tengo un link con nombre "contacto" y el target="central" (central es nombre el iframe), al presionar "contacto" se carga en el iframe el html contacto dentro del iframe, ¿como puedo hacer esto sin iframes?

  5. A las 2/12/09 15:25  

    OpenID elblog ha dicho...

    Puedes poner una lista de nombres de contacto con links tipo #jperez y abajo repetir un formulario para cada contacto, encerrados con algún div con id, CSS y Javascript ocultan los formularios y muestran sólo el que corresponda al hacer click en el nombre. Como este ejemplo http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/vertical.html

    O que un javascript cambie los datos de un único formulario dinámicamente.

    También puedes usar AJAX, y que cargue cada uno por separado, pero si el usuario no tiene Javascript (como un ciego) no podría usar el formulario (creo).

  6. A las 18/12/09 20:56  

    Anonymous Anónimo ha dicho...

    hola saludos te tengo una pregunta actualmente e desarrollado un proyecto en ror y en el uso un iframe para la carga de documentos es decir tengo un formulario con multipart true y como target a mi iframe, estuve investigando en ese tiempo como guardar archivos en el servidor y la mejor solución fue esa, ahora si ya existen métodos modernos me gustaría conocerlos gracias

  7. A las 3/1/10 14:43  

    Blogger Carlos ha dicho...

    Me hace mucha gracia el decir "no useis Iframe es "obsoleto" y yo digo, si, es tan obsoleto que no existe NADA capaz de hacer lo mismo que un iframe de forma tan sencilla, a la gente le encanta decir "usa ayax" o "javascript" y yo digo, son menos eficientes (en todos los sentidos, velocidad y espacio de memoria) y no es tan sencillo como un simple target.

    Así que antes de decir "obsoleto" proponed algo que no sea "obsoleto".

Página principal

Publicidad