Comment les 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 en incluant un fichier JavaScript du fournisseur de services sur votre propre page, mais ce qui m'intéresse, ce sont les blocs de construction pour créer un tel service. Par exemple, utilisent-ils une bibliothèque comme jQuery, mooTools ou prototypejs et comment évitent-ils les conflits d'espace de noms?

Je me demandais également s'il y avait des livres, des articles, des articles de blog qui vont sur cette utilisation spécifique de JavaScript (ne recherchant pas de ressources générales sur JavaScript).

Salutations et merci à l'avance,

Eliot

Answer 1

Voici un tutoriel j'ai trouvé sur How to build a web widget (using jQuery)

Answer 2

En général, ce que vous décrivez est appelé « Javascript Widget » (juste de UserVoice arrive à apparaître sur le côté de la page).

Il existe un bon didacticiel sur creating Javascript Widgets que vous pouvez consulter.

Answer 3

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

1. Si le service ne rend pas obligatoire que le script doit être inclus au bas de la page, crochet du corps événement onload, sans marcher sur les orteils de tout gestionnaire existant (en interceptant la fonction de gestionnaire existante, qui pourrait à son tour être chaînée à d'autres fonctions).
2. Injectez de nouveaux éléments HTML dans le document. Le code HTML serait très probablement inséré dans le script sous forme de littéraux de chaîne car la définition de innerHTML sur un seul élément injecté serait plus facile et plus rapide que la manipulation directe du DOM en utilisant une multitude d'appels de fonctions.
3. L'intégralité du script doit rester à l'intérieur d'une fermeture pour éviter les conflits de noms.
4. Une structure JS peut être utilisée ou non; il faut faire preuve de prudence lorsqu'on inclut un cadre, car il pourrait entrer en conflit avec un cadre différent préexistant ou une version différente du même cadre.

Answer 4

EDT: En général, vous allez faire votre client/client/ami incluent un script dans leur page, puis par ce script, vous pouvez faire ce qui suit:

Dans JS pur, vous pouvez charger des scripts de distance (ou pas à distance) dynamiquement 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/à distance/scripts/path.js'); en jquery mais vous serez sûr jQuery chargé sur le site distant

Ensuite script chargé peut effectuer différentes actions comme la création d'éléments comme celui-ci

corps var = document.getElementsByTagName ('body') [0]; var aDiv = document.createElement ('script'); /* ici, vous pouvez modifier vos propriétés divs et regarder */ body.appendChild (aDiv); // $ (''). AppendTo ('body'); Pour jQuery

Pour approfondir JavaScript, vous pouvez lire par exemple Javascript: The Good Parts ou Definitive Guide To Javascript.