Comment des services hébergés comme UserVoice intègrent-ils leur contenu sur d'autres sites Web?

Question

Comment les services hébergés comme UserVoice intègrent-ils leur contenu sur d'autres sites Web?

Je vois que c'est via l'inclusion d'un fichier JavaScript du fournisseur de services sur votre propre page. Ce qui m'intéresse, toutefois, ce sont les éléments de base pour la création d'un tel service.

Par exemple, utilisent-ils une bibliothèque telle que jQuery, mooTools ou prototypejs et comment évitent-ils les conflits d’espaces de nom?

Je me demandais également s’il existait des livres, des articles ou des articles de blog qui traitaient de cette utilisation spécifique de JavaScript (ne recherchant pas de ressources générales sur JavaScript).

Cordialement et merci d'avance,

Eliot

Answer 1

Voici un excellent tutoriel que j'ai trouvé sur Comment créer un widget Web (à l'aide de jQuery)

Answer 2

En règle générale, ce que vous décrivez est appelé un "widget Widget". (UserVoice arrive juste pour apparaître sur le côté de la page).

Il existe un bon tutoriel sur créer des widgets Javascript que vous pouvez consulter.

Answer 3

La structure de base d'un tel service intégrable serait la suivante:

1. Si le service n'exige pas que le script soit inclus au bas de la page, raccrochez l'événement body onload sans marcher sur les pieds des gestionnaires existants (en interceptant la fonction de gestionnaire existante, qui pourrait tour être chaîné à d'autres fonctions).
2. Injectez de nouveaux éléments HTML dans le document. Le code HTML serait très probablement intégré dans le script sous forme de littéraux de chaîne, car il serait plus facile et rapide de placer innerHTML sur un seul élément injecté, par rapport à une manipulation directe dans le DOM.
3. Le script entier doit vivre dans une fermeture pour éviter les conflits de noms.
4. Un framework JS peut ou non être utilisé; il faut faire preuve de prudence lors de l’inclusion d’un cadre, car il pourrait entrer en conflit avec un cadre préexistant, différent ou une version différente du même cadre.

Answer 4

EDT: En règle générale, vous obligez votre client / client / ami à inclure un script dans leur page. Vous pouvez ensuite effectuer les opérations suivantes via ce script:

En JS pur, vous pouvez charger des scripts de manière distante (ou moins éloignée) de manière dynamique via

.

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

// $ .getScript ('votre / remote / scripts / path.js'); dans jQuery mais vous serez sûr que jQuery sera chargé sur le site distant

Ensuite, le script que vous avez chargé peut effectuer différentes actions, telles que la création d'éléments comme celui-ci

var body = document.getElementsByTagName ('body') [0]; var aDiv = document.createElement ('script'); / * Ici, vous pouvez modifier les propriétés de votre div et regarder * / body.appendChild (aDiv); // $ (''). appendTo ('body'); pour jQuery

Pour une analyse plus approfondie de JavaScript, vous pouvez lire, par exemple, Javascript: les bons côtés ou Guide définitif pour Javascript .