¿Cómo los servicios alojados como UserVoice incrustan su contenido en otros sitios web?

Question

¿Cómo los servicios alojados como UserVoice incorporan su contenido en otros sitios web?

Veo que es mediante la inclusión de un archivo JavaScript del proveedor de servicios en su propia página, sin embargo, lo que me interesa son los componentes básicos para crear un servicio como ese.

Por ejemplo, ¿usan una biblioteca como jQuery, mooTools o prototypejs y cómo evitan los conflictos de espacios de nombres?

También me pregunté si había libros, artículos, publicaciones de blog sobre este uso específico de JavaScript (sin buscar recursos generales en JavaScript).

Saludos y gracias de antemano,

Eliot

Answer 1

Aquí hay un gran tutorial que encontré en Cómo construir un widget web (usando jQuery)

Answer 2

Generalmente, lo que está describiendo se llama " Javascript Widget " (UserVoice simplemente aparece en el lado de la página).

Hay un buen tutorial sobre crear widgets de Javascript que puedes consultar.

Answer 3

La estructura básica de dicho servicio integrable sería:

1. Si el servicio no exige que el script se incluya en la parte inferior de la página, enganche el evento de carga del cuerpo, sin pisar los dedos de los controladores existentes (interceptando la función de controlador existente, que podría a su vez estar encadenado a otras funciones).
2. Inyecte nuevos elementos HTML en el documento. Lo más probable es que el código HTML se inserte en la secuencia de comandos como literales de cadena, ya que establecer innerHTML en un solo elemento inyectado sería más fácil y rápido que la manipulación directa de DOM utilizando una ráfaga de llamadas a funciones.
3. Todo el script debe vivir dentro de un cierre para evitar conflictos de nombres.
4. Un marco JS puede o no ser usado; se requiere precaución cuando se incluye un marco ya que podría entrar en conflicto con un marco diferente preexistente o una versión diferente del mismo marco.

Answer 4

EDT: generalmente hará que su cliente / cliente / amigo incluya un script en su página, luego, a través de ese script, puede hacer lo siguiente:

En JS puro, puede cargar scripts desde una ubicación remota (o no tan remota) dinámicamente a través de

   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = 'your/remote/scripts/path.js';
   document.getElementsByTagName('body')[0].appendChild(script);

// $ .getScript ('your / remote / scripts / path.js'); en jquery pero estarás seguro de que jQuery se cargó en un sitio remoto

Luego, el script que cargó puede realizar diferentes acciones, como crear elementos como este

var body = document.getElementsByTagName ('body') [0]; var aDiv = document.createElement ('script'); / * aquí puedes modificar tus propiedades divs y mirar * / body.appendChild (aDiv); // $ (''). appendTo ('cuerpo'); para jQuery

Para una mirada más profunda a JavaScript, puede leer, por ejemplo, Javascript: The Good Parts o Guía definitiva para Javascript .