Как размещенные службы, такие как UserVoice, встраивают свой контент на другие веб-сайты?

Question

Как размещенные службы, такие как UserVoice, встраивают свой контент на другие веб-сайты?

Я вижу, что это происходит путем включения файла JavaScript от поставщика услуг на вашу собственную страницу, однако меня интересуют строительные блоки для создания такого сервиса.

Например, используют ли они такие библиотеки, как jQuery, mooTools или Prototojs, и как им избежать конфликтов пространств имен?

Также интересно, есть ли какие-нибудь книги, статьи, сообщения в блогах, посвященные этому конкретному использованию JavaScript (без поиска общих ресурсов по JavaScript).

С уважением и заранее спасибо,

Элиот

Answer 1

Вот отличный урок, который я нашел на Как создать веб-виджет (с помощью jQuery)

Answer 2

Обычно то, что вы описываете, называется «Виджет Javascript» (UserVoice просто появляется сбоку на странице).

Есть хороший учебник по создание виджетов Javascript что вы можете проверить.

Answer 3

Базовая структура такого встраиваемого сервиса будет следующей:

1. Если служба не требует включения сценария в нижнюю часть страницы, перехватите событие onload тела, не наступая на пальцы каких-либо существующих обработчиков (перехватывая существующую функцию обработчика, которая, в свою очередь, может быть связана цепочкой к другим функциям).
2. Вставьте новые HTML-элементы в документ.HTML-код, скорее всего, будет встроен в скрипт в виде строковых литералов, поскольку установка InternalHTML для одного внедренного элемента будет проще и быстрее, чем прямая манипуляция DOM с использованием множества вызовов функций.
3. Весь сценарий должен находиться внутри замыкания, чтобы избежать конфликтов имен.
4. Фреймворк JS может использоваться, а может и не использоваться;При включении платформы требуется осторожность, поскольку она может конфликтовать с уже существующей другой платформой или другой версией той же платформы.

Answer 4

EDT:Обычно вы просите вашего клиента/клиента/друга включить скрипт на свою страницу, а затем с помощью этого скрипта вы можете сделать следующее:

В чистом JS вы можете динамически загружать сценарии из удаленного места (или не очень удаленного) через

   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');в jquery, но вы будете уверены, что jQuery загружен на удаленном сайте

Затем загруженный вами скрипт может выполнять различные действия, например создавать такие элементы.

var body = document.getElementsByTagName('body')[0];var aDiv = document.createElement('script');/ * Здесь вы можете изменить свои свойства Divs и выглядеть */ body.appendchild (adiv);// $('').appendTo('body');для jQuery

Для более глубокого изучения JavaScript вы можете прочитать, например, Javascript:Хорошие части или Полное руководство по Javascript.