¿Los iframes se consideran 'malas prácticas'? [cerrado]

286

En algún momento, tomé la noción de que usar iframes es una 'mala práctica'.

¿Es esto cierto? ¿Cuáles son las ventajas y desventajas de usarlos?

melancólico
fuente

Respuestas:

217

Como con todas las tecnologías, tiene sus altibajos. Si está utilizando un iframe para moverse por un sitio desarrollado adecuadamente, entonces, por supuesto, es una mala práctica. Sin embargo, a veces un iframe es aceptable.

Uno de los principales problemas con un iframe tiene que ver con marcadores y navegación. Si lo está utilizando para simplemente insertar una página dentro de su contenido, creo que está bien. Para eso es un iframe.

Sin embargo, también he visto abusar de iframes. Nunca debe usarse como parte integral de su sitio, sino como un contenido dentro de un sitio.

Por lo general, si puede hacerlo sin un iframe, esa es una mejor opción. Estoy seguro de que otros aquí pueden tener más información o ejemplos más específicos, todo se reduce al problema que está tratando de resolver.

Dicho esto, si está limitado a HTML y no tiene acceso a un servidor como PHP o ASP.NET, etc., a veces un iframe es su única opción.

adzm
fuente
23
"si está limitado a HTML y no tiene acceso a un servidor como PHP o ASP.NET, etc., a veces un iframe es su única opción" ... eso no es cierto. Puede incrustar contenido externo en su página obteniendo datos a través de jquery ajax y luego rellenando un div con esos datos.
developer747
53
@ developer747: eso no funcionará si el contenido externo está en otro sitio debido a la misma política de origen . En algunos casos oscuros, el sitio remoto puede ser compatible con JSONP ; pero probablemente no.
Peter V. Mørch
2
Siento que los iframes son mucho menos útiles que el conjunto de marcos anterior porque el usuario no puede cambiar el tamaño de los iframes, pero no usaría un conjunto de marcos para nada más que un manual ya que ya no existe en html5. Ejemplo: manual del fabricante del juego
Domino
15
Cabe mencionar que los iframes son actualmente la única forma de definir un alcance CSS anidado. Aíslan el marcado interno, el diseño, el estilo y Javascript * del documento externo, lo cual es útil en muchos casos de uso y aplicaciones. * Javascript no está aislado si el documento interno comparte origen con el externo; por otro lado, los documentos de diferentes orígenes aún pueden comunicarse utilizando window.postMessage(), por ejemplo, para implementar el cambio de tamaño de iframe colaborativo.
Tobia
1
¡El iFrame es malo! puede ayudar también
DanielV
75

No son malas prácticas, son solo otra herramienta y agregan flexibilidad.

Para usar como un elemento de página estándar ... son buenos, porque son una forma simple y confiable de separar el contenido en varias páginas. Especialmente para el contenido generado por el usuario, puede ser útil "sandbox" páginas internas en un iframemarcado tan pobre que no afecta a la página principal. La desventaja es que si introduce varias capas de desplazamiento (una para el navegador y otra para el iframe), sus usuarios se sentirán frustrados. Como dijo adzm, no desea utilizar un iframepara la navegación primaria, pero piense en ellos como un texto / marcado equivalente a la forma en que se incrustará un video u otro archivo multimedia.

Para la secuencia de comandos de eventos en segundo plano, la opción generalmente es entre contenido oculto iframey XmlHttpRequestcargar contenido para la página actual. La diferencia es que iframegenera una carga de página, por lo que puede retroceder y avanzar en la memoria caché del navegador con la mayoría de los navegadores. Tenga en cuenta que Google, que usa XmlHttpRequesttodo el lugar, también usa iframes en ciertos casos para permitir que un usuario retroceda y avance en el historial del navegador.

Tom
fuente
11
Creo que es importante mencionar que los iframes se pueden usar para incrustar una página de un dominio en una página de otro dominio. Si la página incrustada desea seguir a los usuarios con cookies y mantener esa información del dominio del host, entonces su única opción es usar un iframe ya que JS está bajo el control del dominio del host.
Nicholas Leonard
@NicholasLeonard Un buen ejemplo es que puede usarlos para forzar la caché basada en almacenamiento local en la página haciendo que la página de índice sea un script que detecte si la subpágina está en almacenamiento local. Luego, document.write de localstorage si está allí, y si no, agregue un iframe a esa subpágina. En esa subpágina, tenga un script para almacenar las subpáginas del elemento HTML externalhtml en localstorage. Una razón realmente buena para usar este método es que le permite agregar una pantalla de carga.
No estoy de acuerdo, pero no puedo rechazarlo, porque es un punto de vista importante.
victorf
28

Es una 'mala práctica' usarlos sin comprender sus inconvenientes. La publicación de Adzm los resume muy bien.

Por otro lado, gmail hace un uso intensivo de iFrames en segundo plano para algunas de sus características más interesantes (como la carga automática de archivos). Si conoce las limitaciones de iFrames, no creo que deba sentir ningún reparo en usarlas.

Chris Van Opstal
fuente
18

Habiendo trabajado con ellos en muchas circunstancias, realmente he llegado a pensar que los iframe son el equivalente de programación web de la declaración goto. Es decir, algo que generalmente se debe evitar. Dentro de un sitio pueden ser algo útiles. Sin embargo, entre sitios, casi siempre son una mala idea para cualquier cosa que no sea el contenido más simple.

Considere las posibilidades ... si se usa para contenido parametrizado, han creado una interfaz. Y en un sitio profesional, esa interfaz requiere un SLA y gestión de versiones, que casi siempre se ignoran en las prisas por conectarse.

Si se usa para contenido activo (marcos que alojan el script), existen restricciones de script de dominio cruzado (diferentes). Algunos pueden ser pirateados, pero rara vez de manera consistente. Y si su contenido enmarcado necesita ser interactivo, tendrá dificultades para hacerlo más allá del marco.

Si se usa con contenido con licencia, los sitios participantes están agobiados por la necesidad de mover la información de derechos fuera de banda entre los hosts.

Por lo tanto, aunque ocasionalmente son útiles dentro de un sitio, no son aptos para mashups. Estás mucho mejor mirando portales y portlets reales. Peor aún, son los favoritos de todos los aficionados a la web: muchos gerentes de tecnología los han aprovechado como solución a muchos problemas. De hecho, crean más.

usuario261975
fuente
10

Según mi experiencia, un lado positivo para el iframe es cuando se llaman códigos de terceros, lo que puede implicar llamar a un javascript que llama a tiene un Document.write();comando. Como ya sabrá, estos comandos no se pueden llamar de forma asíncrona debido a cómo se analiza (DOM Parser, etc.). Un ejemplo de esto es http://sourceforge.net/projects/phpadsnew/ Hice uso de iframes para ayudar a acelerar nuestro sitio, ya que hubo múltiples llamadas a phpadsnews y el sitio estaba esperando la respuesta antes de proceder a procesar diferentes partes de la página. Con un iframe pude permitir que el sitio procesara otras partes de la página y aún así llamar al Document.write()comando de phpads de forma asincrónica. Prevención y bloqueo js.

mel3kings
fuente
8

Definitivamente hay usos para la gente de iframes. ¿De qué otra forma pondrías el widget de redes meteorológicas en tu página? La única otra forma es tomar su XML y analizarlo, pero luego, por supuesto, necesita condiciones para mostrar los gráficos meteorológicos pertinentes ... realmente no vale la pena, pero mucho más limpio si tiene tiempo.

djbryson
fuente
6

El modelo de conjunto de marcos original (Conjunto de marcos y elementos de marco) eran muy malos desde el punto de vista de la usabilidad. IFrame fue una invención posterior que no tuvo tantos problemas como el modelo original del conjunto de marcos, pero tiene su inconveniente.

Si permite que el usuario navegue dentro del IFrame, los enlaces y marcadores no funcionarán como se espera (porque marca la URL de la página externa, pero no la URL del iframe).

JacquesB
fuente
1
tengo que estar en desacuerdo ... un comentario amplio como este no está calificado en absoluto.
Dawesi
5

Cuando su página principal se carga en el protocolo HTTP y partes de su página deben funcionar en el protocolo HTTPS, iFrame puede vencer a jsonp.

Especialmente, si su tipo de datos no es json de forma nativa y necesita traducirse en el servidor a json y traducirse en el cliente a, por ejemplo, html complejo.

Entonces no, iFrame no es malo.

Jeffz
fuente
5

No son malos, pero en realidad son útiles. Tuve un gran problema hace algún tiempo cuando tuve que incrustar mi feed de Twitter y simplemente no me dejaba hacerlo en la misma página, así que lo configuré en una página diferente y lo puse como un iframe.

También son buenos porque todos los navegadores (y navegadores de teléfonos) los admiten. No pueden considerarse una mala práctica, siempre y cuando los use correctamente.

Vlad
fuente
4

Vale la pena señalar que los iframes, independientemente de la velocidad de la conexión a Internet de sus usuarios o del contenido del iframe, causarán una desaceleración pequeña (0.3s más o menos) pero notable en la velocidad de descarga de su página. Esto no es algo que verá cuando lo pruebe localmente. En realidad, esto es cierto para cualquier elemento agregado a una página, pero los iframes parecen ser peores.

Brian
fuente
1
¿Por qué? ¿Y es su forma de hacer que los iframes se carguen una vez que la página principal termina de cargarse?
Nicholas Leonard
3
No recuerdo por qué son tan lentos; Estaba investigando esto hace un año. Probablemente porque el navegador está creando básicamente un contexto de representación completamente nuevo para cada iframe. En cuanto a hacer que no se carguen hasta que se complete la carga de la página, puede usar un iframe en blanco y luego configurar la etiqueta src del iframe después de que se complete la carga de la página. Sin embargo, tenga en cuenta que incluso un iframe en blanco ralentizará la representación de su página, aunque no la descarga, por lo que las cosas seguirán pareciendo un poco más lentas para sus usuarios.
Brian
3
Por el contrario, uno podría considerar discutir CDN (Content Delivery Networks) cuando haga referencia a velocidad e iFrames. Tenga en cuenta que el iFrame puede descargar recursos en paralelo y, por lo tanto, proporcionar un impulso en la velocidad (dependiendo del navegador). Aquí hay al menos otra referencia que está de acuerdo con mi posición. developer.yahoo.com/performance/rules.html
Strixy
2
@Strixy: la URL que especifique indica que los IFrames son costosos, incluso cuando están en blanco. Recomienda minimizar el uso de IFrames. Usar un CDN para acelerar su sitio es ortogonal al uso de IFrames. Un CDN puede ayudar a mitigar el costo de usar un IFrame. Sin embargo, CDN sin IFrame es mejor que CDN e IFrame.
Brian
1
@Strixy: si desea descargar recursos en paralelo, hay mejores formas de hacerlo. El viejo atractivo es cargar todas esas cosas a través de javascript. Lo nuevo es utilizar un trabajador de servicio, que efectivamente le permite administrar directamente cómo el agente de usuario carga, precarga y almacena en caché los recursos del sitio utilizando la lógica del lado del cliente. El otro atractivo nuevo es http / 2 push, que le permite enviar recursos al navegador sin esperar que el navegador los solicite. Sin embargo, dado que el caché http / 2 se verifica después de otros cachés del navegador, a menudo es una mala elección para este propósito.
Brian
3

He visto que los IFRAME se aplicaron con mucho éxito como una forma fácil de crear menús contextuales dinámicos, pero el público objetivo de esa aplicación web solo eran usuarios de Internet Explorer.

Yo diría que todo depende de sus requisitos. Si desea asegurarse de que su página funcione igual de bien en todos los navegadores, evite los IFRAME. Si se dirige a un público limitado y conocido (por ejemplo, en la Intranet local) y ve un beneficio en el uso de IFRAME, entonces diría que está bien hacerlo.

JacobE
fuente