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

Question

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

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

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

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

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

Элиот

Answer 1

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

Answer 2

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

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

Answer 3

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'); / * здесь вы можете изменить свои свойства div'ов и посмотреть * / body.appendChild (Adiv); // $ (''). appendTo ('body'); для jQuery

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

Answer 4

Как правило, то, что вы описываете, называется «Javascript Widget» (UserVoice просто появляется на боковой стороне страницы).

Существует хорошее руководство по созданию Javascript Widgets , которое вы можете проверить.