Diseño de widgets. ¿Qué es mejor: IFrames o Javascript?

Question

Estoy en las etapas iniciales de diseño de un widget y surgió una pregunta de diseño para lo que es más ventajoso: tenerlo como IFrame o utilizar otra tecnología.

¿Alguien ha creado widgets antes para ser incrustado en otros sitios? ¿Qué es lo mejor fue diseñar/diseñarlos? ¿Alguna buena práctica en particular?

Gracias, Alex

Answer 1

En general, si se van a utilizar los datos dinámicos de su servidor que debe utilizar un iframe, si no que no debería.

Ventajas de marcos flotantes:

• fácil incluir los datos de su servidor
• se pueden utilizar las hojas de estilo sin preocuparse por las colisiones selector
• de su usuario no tiene que preocuparse por los problemas de seguridad asociados con el correr javascript en su página
• Usted no tiene que representar hTML de tu widget con javascript

Ventajas de JS única flash

• Puede crear interfaces naturales más ágil y más que no requieren una segunda carga de página completa y se puede hacer fácilmente para adaptarse a un contenedor. Esto significa que puede evitar pergaminos anidados.
• Menos carga se puso en su servidor
• Su control puede interactuar con el resto de la página que está incrustado en
• Su usuario tiene más control sobre la funcionalidad del widget.

Si aún tiene problemas para decidir, debe ver cómo se construyen otros widgets similares y también considerar las implicaciones del mismo principio de origen.

Answer 2

He incluido varios widgets en mi sitio web personal. Voy a ir brevemente a través de algunos ejemplos:

Facebook Comentarios

// Facebook comments 
<fb:comments xid="12345678" numposts="3" width="380"></fb:comments> 

// Facebook initialization 
<div id="fb-root"></div> 
<script> 
    window.fbAsyncInit = function() { 
     FB.init({appId: '123456789123456789', status: true, cookie: true, xfbml: true}); 
    }; 
    (function() { 
     var e = document.createElement('script'); e.async = true; 
     e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; 
     document.getElementById('fb-root').appendChild(e); 
    }()); 
</script> 

• Personalmente no me gusta el uso de etiquetas XML personalizado.
• Un enfoque bastante exagerado. Quizás sea útil si proporciona más funcionalidades que solo un widget simple.

Twitter

// Twitter tweets 
<div id="tweets-container"></div> 
<script> 
    new TWTR.Widget({ 
     profile: true, 
     id: 'tweets-container', 
     loop: false, 
     width: 250, 
     height: 200, 
     theme: { 
      shell: { 
       background: 'transparent', 
       color: '#3082af' 
      }, 
      tweets: { 
       background: 'transparent', 
       color: '#444444', 
       links: '#1985b5' 
      } 
     } 
    }).render().setProfile('TwitterUsername').start(); 
</script> 

• limpia y ordenada Javascript.

Google chat de respuesta insignia

// Google Chatback badge 
<iframe src="http://www.google.com/talk/service/badge/Show?tk=z01q6amlq6ob76db19rdnikg1pbce3ff3ln9076tc8unrn37r3gmje9pf3gvl80num7ta10tv34ou7has2u2th5btn3uoouvpcufnqolc1mj77nmgld5mm3qf3reqkd3jqcvemqlpr8b04pf0qaf7osm10lo6kioji176dpcn&amp;w=200&amp;h=60" allowtransparency="true" width="200" frameborder="0" height="60"></iframe> 

Google Calendar

// Google calendar widget 
<iframe src="http://www.google.com/calendar/embed?showTitle=0&amp;showCalendars=0&amp;showTz=0&amp;mode=WEEK&amp;wkst=2&amp;hl=en&amp;src=nicohome%40gmail.com&amp;color=%232952A3&amp;ctz=Europe%2FHelsinki" style=" border-width:0 " width="557" height="445" frameborder="0" scrolling="no"></iframe> 

deliciosas Marcadores

// Delicious bookmarks 
<script type="text/javascript" src="http://feeds.delicious.com/v2/js/Nicodemuz?title=My%20latest%20bookmarks&icon=s&count=10&bullet=%C2%BB&sort=date&name&showadd"></script> 

Resumen

• Como podemos ver, JavaScript y marcos flotantes se utilizan mucho en la industria.
• Si necesita procesar contenido en más de un lugar, use javascript, ya que un iframe solo se puede representar en un solo lugar.
• Si su widget no requiere javascript para funcionar, entonces ir con un iframe puede ser más adecuado, ya que su widget también funcionaría en los navegadores con JavaScript desactivado.