Estoy construyendo un widget, y he estado usando iframes para presentar contenido dentro de él. En algún momento, podría comenzar a servir HTML y JS de terceros, así que pensé que iframes sería una buena idea.¿Es iframes una idea terrible?
Hace que el widget javascript sea un poco más complicado, y me preocupa que esta no sea la mejor implementación.
¿Alguna opinión? Sería de gran ayuda escuchar lo que otras personas piensan sobre iframes.
No, nada de malo en iframes. Es probable que Iframes sea una mejor idea si va a empezar a publicar contenido de terceros.
La próxima especificación de HTML5 también planea construir más características de seguridad en iframes para situaciones como esta, por lo que consideraría una buena práctica usarlas también ahora.
Depende de lo que hace el widget. Los Iframes tienen su lugar, pero causan pocos dolores de cabeza en el diseño (por no hablar de complicar más tu js) así que la mayoría de las personas tienden a evitarlos a menos que sea absolutamente necesario.
Una cosa que descubrí recientemente es que las páginas .aspx incrustadas en el interior iframes a veces tienen problemas con la pérdida de cookies, lo que provocó la pérdida del estado de la sesión en una aplicación con la que estuve involucrado.
Para mí, era en un escenario en el que una tienda de desarrollo diferente consumía una de mis páginas .aspx en su propia página. Esto significa que estábamos en servidores separados, que pueden ser importantes o no.
Aparentemente, esto se debió a que la página padre rechazó las cookies de la página secundaria ... Como dice la cookie de sesión, también lo hace la sesión.
La mecánica específicos de cómo funciona este son un poco involucrados: More Details
Este problema no tuvo impacto en Firefox, pero se presentaron en IE7 y fue un verdadero misterio durante unas horas.
Además, tengo que contradecir el artículo que he vinculado anteriormente en un punto. El artículo dice que no obtendrá esto si la página que lo contiene también es .aspx ... En este caso, eso no era cierto porque ambas páginas eran .aspxs.
Eso arroja algunas dudas sobre todo lo demás que dice el artículo acerca de esta situación, pero condujo a una resolución, por lo que también es algo.
Como sugiere el artículo, me puso en el siguiente código, que inyecta una P3P (Preferencias de Privacidad Proyecto - Nunca había oído hablar de él) en la cabecera de la página de eventos Init:
HttpContext.Current.Response.AddHeader("p3p", "CP=\""IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\""")
... Y eso solucionó el problema
iframes, como marcos, son solo controles para usar en la tarea en cuestión. Como tal, no es ni bueno ni malo en sí mismo, pero podría ser bueno o malo en función de la tarea en cuestión y los requisitos del cliente. Hasta donde yo sé, todos los navegadores modernos (y usuarios que no sean linux) podrán "ver y consumir" iframes sin ningún problema.
Una buena opción es utilizar la propiedad CSS de desbordamiento. El valor predeterminado es visible, pero puede establecerlo en oculto, desplazarse o automático. Usaría auto en tu caso. Si su contenido se vuelve demasiado grande, parecerá que tiene un iframe, pero aún está justo en la página.
ver: overflow property
No necesariamente, siempre que el contenido dentro de la iframe es predecible.
Antes de que XMLHTTPRequest fuera ampliamente utilizado, las personas usaban una combinación de JavaScript e iframes para publicar contenido de forma dinámica sin realizar actualizaciones de página completa.
Hay mucha información sobre el desarrollo de sitios de esta manera, por lo que debería tener un tiempo relativamente fácil de encontrar una solución a muchas de las complicaciones que es probable que golpee.
La única cosa que me parece dolorosa es el uso de JavaScript entre dominios en iframes. Si la página que inserta en el iframe pertenece a un dominio diferente de la página "principal", los navegadores tienen restricciones de seguridad que impiden el acceso a una de la otra. El truco está en que ambas páginas declaren
document.domain = 'somedomain.com';
Hay muchas cosas en la Web sobre este tipo de solución.
¡Buena suerte!
Creo que solo pueden cambiar document.domain para que sea un dominio de nivel superior, es decir, www.acme.com puede cambiar el dominio a acme.com, pero no a google.com. Por lo tanto, esto solo ayuda a iframes a comunicarse a través de subdominios de un solo dominio. (Podría estar equivocado, pero eso es lo que recuerdo) – Josh
@Josh: tiene razón, el document.domain solo funcionará para las páginas en el mismo dominio principal pero en otro subdominio diferente. –
@Josh Tienes razón, pero siempre puedes usar 'window.location.href'. – nyuszika7h
Personalmente, lo evitaría si puede sin demasiada molestia. Al usar Javascript (o AJAX si necesita cargarlos dinámicamente), puede simplemente usar un div y cambiar el contenido según sea necesario; en algunos casos esto le dará mucha más flexibilidad y simplificará su JS, especialmente si hay mucho de interacción entre su widget y el resto de la página.
Dicho esto, investigaría las dos opciones, y si la ruta JS parece demasiado engañosa o complicada, simplemente vaya con iframes.
Solo tengo una cosa "realmente mala" de la que soy consciente.
Si su tercera parte hace algo de JavaScript, que los intentos de modificar su DOM un poco demasiado pronto ... IE6 y IE7 tirará la "Operation Aborted" error oh tan inútil, entonces en blanco no sólo el iframe, pero toda la página circundante. (por ejemplo, su sitio aparece inactivo)
No se ha solucionado en IE8, pero el bloqueo se maneja mejor.
En mi experiencia, los iframes son hacks o ahorran tiempo, asegúrese de que si los está usando son necesarios por esas razones. Si tiene control sobre el contenido (o puede obtener el control a través de la creación de reflejos o raspado), debe considerar el uso de AJAX o de las características del servidor para extraer datos externos y sacarlos de la página: terminará siendo más flexible, más robusto y más fácil de administrar al final.
Técnicamente no hay nada malo con iFrame que con alternativas. Pero semánticamente, hay maldad.
La Web se basa en HTTP, un protocolo que dice que una URL dada siempre conduce a un recurso único.
Usando iFrame, solo sirve varios recursos fundidos en páginas web detrás de una URL para todos ellos. Si le preocupa cómo debería crecer la Web, es problemático. Además, para los robots de los motores de búsqueda, es complicado.
Voy a estar en desacuerdo con la mayoría y decir que sí, iframes es una idea absolutamente terrible idea. Cualquiera que haya trabajado dentro de la comunidad de Diseño Web por un tiempo estará de acuerdo en que los iframes son pura maldad y debe evitarse a menos que ABSOLUTAMENTE esencial.
Mis razones para creer que son malas es porque rompen el patrón de navegación de una página web. Al utilizar un iframe, puede romper los botones de retroceso y avance de los navegadores y confundir a los usuarios. Rompe toda la idea detrás del protocolo HTTP; que una URL siempre conducirá a una ubicación única. Si el iframe fuera un caballo, se habría retirado hace mucho tiempo. Hay otras maneras de servir el contenido dinámicamente y estos deberían usarse en su lugar.
Si va a crear un widget entonces las preocupaciones inmediatas con el uso de iframes desaparecen (malo para los motores de búsqueda, malo para marcadores, etc.), pero de cualquier manera el contenido sería mejor servido dinámicamente o incluso en una nueva ventana en lugar que en un iframe
-1 como se dijo en otra respuesta: "no es ni bueno ni malo en sí mismo, pero podría ser bueno o malo en función de la tarea en cuestión". Además, el problema con el botón Atrás y Adelante no es específico de iframes, sino que también ocurre con otro contenido dinámico. – Christophe
Iframes no son malos, son simplemente otra herramienta como cualquier otra cosa y para determinar sus méritos, debe determinar el contexto en el que se utilizarán. Google Image Search y muchos otros sitios de alto perfil usan iframes para propósitos limitados.
En general, considero que se utilizan para calificar o para permitir que un usuario regrese a un sitio que redirige al usuario fuera del sitio.
Nota: si utiliza iframas de dominios cruzados, p. un iframe que hace referencia a un dominio fuera de donde se sirve la página, está limitado por diseño por razones de seguridad y no puede acceder a través de javascript las partes internas de un DOM fuera del dominio al que está asociado.
También tenga en cuenta que muchos sitios evitan que su sitio se incruste y raya el iframe (redirigiendo la url superior a su dominio).
Re: "toda la idea detrás del protocolo HTTP, que una URL siempre conducirá a una ubicación única"
sirvo toda mi CMS desde la misma URL para la seguridad y la escalabilidad (utilizando la mayoría de POST en lugar de GET parámetros). No quiero que el contenido seguro sea visible sin autenticación, y un sistema de envío me facilita el desarrollo ya que no tengo que preocuparme por la autenticación de cada página nueva.
Además, para algunas aplicaciones SEO no es aplicable (por ejemplo, para ERP basado en web).
Uso un iFrame para publicar contenido desde un árbol de ensamblaje generado por PHP. No quiero que el árbol (y las visibilidades de los nodos) se actualicen siempre que el usuario quiera ver detalles de una pieza/ensamblaje.
¡Me alegra que no soy uno de tus usuarios! (No se puede marcar en * all *!) – SamB
Hay varios usability and accessability issues with iframes. Algunos navegadores y lectores de pantalla no pueden mostrar marcos flotantes, por lo que debe proporcionar contenido alternativo:
<iframe src="content.html">
<p>
This content will only be displayed by browsers that do not support
iframes. You should provide a link to the content, or in your
case an alternative way to use your widget.
</p>
</iframe>
Si comienza a servir contenidos de terceros, usted debe mirar hacia fuera para el iframe agarrar el foco después de que haya terminado de cargar. Si bien es una molestia menor para los usuarios habituales, puede ser muy confuso para los usuarios que navegan con lectores de pantalla.
Hay un problema importante con los iframes que apenas se menciona pero que me molesta.
Nuestro colega tiene una vida de trabajo invertido en una base de datos dinámicamente cambiante que hemos cargado en las hojas de cálculo de Google Docs que luego mostramos en nuestro sitio junto con una gran cantidad de material de apoyo.
No hay absolutamente nada que impida que alguien agarre el código iframe de la fuente de mi página y lo meta en su página. Ahora están recibiendo todos nuestros datos, actualizados hasta hace unos minutos, publicados en su página por absolutamente nada.
Si un iframe de google podría estar vinculado a un dominio específico, eso detendría eso en sus pistas.
¿Alguna idea, chispas brillantes?
Esto es bastante antiguo, pero si aún está buscando una solución, entonces puedo pensar en utilizar el encabezado 'X-Frame-Option' para restringir quién puede cargar el iframe. Ahora, obviamente no puede aplicar este encabezado en una url de google docs ya que no la controla. Pero lo que puede hacer es, en lugar de usar una URL de google docs directamente, crear su propia url, que redirecciona a un lado del servidor a la url de google docs. Y luego puede aplicar el encabezado apropiado 'X-Frame-Option' a su propia URL – Suhas
I +1 aquí - la única advertencia, por supuesto, es asegurarse de que el uso sea realmente ideal (es decir, en lugar de simplemente usar Ajax para obtener los datos necesarios, el servidor siempre puede tomar y analizar el "contenido de terceros"). "y ser recuperado a través de llamadas fuera de banda). –