2010-07-11 21 views
9

Pronto tendré que crear un widget que algunos de nuestros clientes puedan insertar en sus propios sitios web.JSONP vs IFrame?

A prueba de futuro mi aparato el código de inserción sería algo como esto:

<script type="text/javascript" src="path/to/remote/file.js"></script> 
<div id="my_widget"></div> 

¿Cuáles son los puntos fuertes y débiles de los marcos flotantes vs JSONP?

¿Hay problemas comunes basados ​​en SEO con iframes?

Respuesta

9

En primer lugar, iframes y jsonp no son mutuamente excluyentes: uno es un medio de representación, el otro es un medio de comunicación.

Su elección es más bien entre la inclusión en el documento (es decir, la creación del widget dentro del DOM del host) o la inclusión del iframe (que tiene un nuevo DOM separado para el widget).

La ventaja de un iframe es sandboxing: no hay colisión entre su widget y el javascript y css del host. Eso significa que usted puede de manera segura:

  • uso/definir cualquier librería javascript desea
  • un uso simple código html junto con las reglas CSS simples (que es una ventaja clara para el mantenimiento)

En cuanto a la inconvenientes:

  • un iframe es grueso y resistente y puede retrasar seriamente la página de acogida representación
  • el iframe se contras también ume mucha más memoria y recursos, lo que puede ser un problema si la página de acogida está dirigidos a los móviles

Por lo tanto, si es razonable asumir las personas que utilizan el widget estarán dispuestos a "adaptar" sus páginas para ello, ir a la forma de documento. Si no, usa un iframe pero entiende los límites.

En cuanto a los problemas de SEO, siempre que cree dinámicamente el widget (ya sea en el documento o con un iframe), los motores de búsqueda no lo verán. No sé si eso es lo que quiere, pero eso es lo que se obtiene;)

+0

En cuanto al rendimiento, un marco flotante no necesariamente proporciona ninguna más sobrecarga carga que JSONP (y de hecho, muchos proporcionan menos sobrecarga). Un iframe se puede cargar de forma asincrónica, mientras que los widgets basados ​​en JSONp pueden requerir que la página se cargue por completo y luego agregar referencias a recursos externos, extendiendo la carga de la página. – mattbasta

+4

Trabajé con una gran cantidad de proveedores de anuncios, y puedo garantizarle que la solución que implica iframes es un factor determinante del rendimiento. Hay una diferencia entre el tiempo que tardará el widget en cargarse (por ejemplo, si necesita que el documento esté listo) y el tiempo que le tomará a la página de host renderizar y ser utilizable. Si lo que estaba implicando sobre JSONP era cierto, entonces nadie aconsejaría la carga de scripts dinámicos como una solución para el rápido procesamiento de páginas. –

1

Heres algunas diapositivas de una presentación de secuencias de comandos entre dominios por Alex Sexton

http://www.slideshare.net/SlexAxton/breaking-the-cross-domain-barrier

Desafortunadamente sus sólo las diapositivas también lo es falta las explicaciones que lo acompañan pero podría ser útil

+0

Aquí está el molde de la pantalla de la misma. DEBE MIRAR para cualquier persona que realice este tipo de tarea. http://alexsexton.com/?p=168 –

+0

Lo que se saca de esta presentación es que si estás haciendo cosas de navegador cruzado hoy en día y NO estás usando una biblioteca como EasyXDM, lo estás haciendo mal. Está escribiendo código que no necesita escribir, y puede que no lo esté haciendo bien, y es posible que se esté perdiendo cambios en las especificaciones. Las bibliotecas estarán actualizadas con los cambios y utilizarán el mejor y el mejor método para cualquier navegador que estén usando sus usuarios. –

+0

Sería bueno ver parte del material de la presentación en su respuesta – Crowie

0

Si realiza llamadas a la API y solo busca datos, JSONP dará como resultado un mejor rendimiento. Si está renderizando cosas, entonces debe usar iframes. Si desea evitar que el sitio host acceda a sus datos de widget, los iframes son el camino a seguir. Pero si sus datos son públicos, entonces JSONP resultará en una implementación más simple (ya que iframes significará que debe lidiar con el cambio de tamaño). Por otro lado, los iframes proporcionan un buen sandboxing de CSS, por lo que no colisionarán con el CSS de la página de host.

0

Elegí ir con JSONP. Puede ver los detalles de cómo lo implementé aquí: if I allow partner sites to republish my RSS feed, will that boost my SEO ranking?

Algunas personas dieron su opinión sobre SEO.Todavía no estoy seguro, sin embargo, si ayuda a SEO. ¡Pero tengo la idea de probarlo y lo voy a llevar a cabo ahora mismo! Voy a hacer una página con solo el JavaScript que representa el widget (feed en este caso). Luego, utilizaré las Herramientas para webmasters de Google para ver si Google recoge alguna de las palabras clave en el contenido de la fuente. Publicaré la respuesta al enlace de arriba después de obtener los resultados.

¡Déjanos lo mejor!

Matt