Deja de usar iframes
28.6.08. Por ooscarr (ooscarr)
Ustedes saben. Los frames y los iframes desaparecieron de la especificación XHTML a partir del XHTML 1.1, y el pobre iframe no ha sido considerado para el HTML 5. 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:
Prueba presionando el botón Convert
.
Éste es el código:
<object type="text/html"
data="http://finance.google.com/finance/converter?
from=USD&to=CLP&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 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.
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;
}
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 Agent | Resultado |
|---|---|
| Fuente: http://joliclic.free.fr | |
| Firefox 1.5 | success |
| Firefox 1.0.7 | success |
| Opera 9 | success |
| Konqueror 3.5.2 | success |
| Safari 2.0.4 | success |
| IE 7RC1 | success |
| IE 6 | success |
| IE 5.5 | success |
| IE 5.0.1 | success |
| IE 4.0.1 | success |
| IE Mac 5.2.3 | success |
| Lynx 2.8.5 | degrade correctly |
Yo le agregaría
| User Agent | Resultado |
|---|---|
| Firefox 2.0.0.14 | success |
| Firefox 3 | success |
| IE8 beta 1 | success |
| Opera 9.5 | success |
| Safari 3.1.1 | success |
| iPhone 1G | success |
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,
- 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.
- Si se desea cambiar el contenido de las páginas incluidas, las llamadas javascript HTTP Request (em, como AJAX) podrían ser una alternativa.
- Si se desea incluir contenido externo sin olvidar a Internet Explorer, no quedará otra que seguir usando iframes (con algún
DOCTYPEantiguo 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
- Insert HTML page into another HTML page
- IEBlog: Why Isn't IE8 Passing Acid2?
-
IFRAMEscenarios (Standard CompliantIFRAMEs and theOBJECTthing) objecttag: embed content in valid strict HTML- Wikipedia - Framing: Criticism
- Javascript for replacing a
targettag in a form for XHTML Strict? - "
iframe" and DOM problem - MSDN: An Introduction to Cross-Document Messaging in Internet Explorer 8
