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

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

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

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

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

С уважением и благодарностью заранее,

Элиот


javascript widget javascript-framework
person Eliot Sykes    schedule 15.09.2009    source источник
comment
многие также используют технику iframe   -  person Alec Smart    schedule 15.09.2009

Ответы (4)


arrow_upward
3
arrow_downward

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

person zvikara    schedule 18.05.2011

arrow_upward
2
arrow_downward

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

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

person Mike Buckbee    schedule 15.09.2009

arrow_upward
2
arrow_downward

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

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

arrow_upward
2
arrow_downward

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.

person Mushex Antaranian    schedule 15.09.2009