Как работают модальные / всплывающие сервисы на основе JavaScript, такие как KissInsights и Hello Bar? - PullRequest
Новая
       3

Как работают модальные / всплывающие сервисы на основе JavaScript, такие как KissInsights и Hello Bar?

7 голосов
/ 22 мая 2011

Я разрабатываю модальную / всплывающую систему для своих пользователей, чтобы встраивать их в свои сайты в соответствии с тем, что KissInsights и Hello Bar (например, здесь и здесь) сделать.

Какова лучшая практика для подобных сервисов? Похоже, пользователи вставляют немного JS, но этот код затем добавляет дополнительный тег сценария.

Мне интересно, как он взаимодействует с веб-сервисом для получения контента пользователя и т. Д.

TIA

Ответы [ 4 ]

9 голосов
/ 10 июля 2011

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

1. Вставить скрипт

Первый шаг, как было сказано, - это создать скрипт на целевой странице.

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

Этот скрипт должен генерировать контент на странице клиента, который вы хотите отобразить.

Однако, есть некоторые вещи, которые необходимо учитывать:

  • Вы не можете использовать какие-либо библиотеки (или если вы это делаете, будьте очень осторожны с тем, что вы используете): они могут конфликтовать с тем, что уже есть на странице, и нарушать работу сайта клиента. Ты не хочешь этого делать.
  • Никогда ничего не переопределяйте, так как переопределение может нарушить работу сайта клиента: сюда входят прослушиватели событий, собственные свойства объектов и т. Д. Например, всегда используйте addEventListener или addEvent с событиями, потому что они позволяют иметь несколько слушателей
  • Вы не можете доверять никаким стилям: все стили HTML-элементов, которые вы создаете, должны быть встроены, потому что веб-сайт клиента может иметь собственный стиль CSS для них.
  • Вы не можете добавить свои собственные правила CSS: они могут снова взломать сайт клиента.

Эти правила применяются к любому сценарию или контенту, который вы запускаете непосредственно на сайте клиента. Если вы создаете iframe и отображаете свой контент там, вы можете игнорировать эти правила в любом контенте, который находится внутри фрейма.

2. Сценарий процесса на вашем сервере

Ваш встраиваемый скрипт обычно должен генерироваться скриптом на вашем сервере. Это позволяет вам включать логику, например, выбирать, что отображать на основе параметров или данных из базы данных вашего приложения.

Это может быть написано на любом языке, который вам нравится.

Обычно URL вашего скрипта должен содержать какой-то идентификатор, чтобы вы знали, что отображать. Например, вы можете использовать идентификатор, чтобы сообщить, какой это сайт клиента или что-то в этом роде.

Если ваше приложение требует, чтобы пользователи вошли в систему, вы можете обработать это как обычно. Тот факт, что серверный скрипт вызывается другим веб-сайтом, не имеет значения.

Связь между встроенным скриптом и вашим сервером или фреймами

В этом есть несколько хитростей.

Как вы, возможно, знаете, XMLHttpRequest не работает в разных доменах, поэтому вы не можете его использовать.

Простейшим способом отправки данных с другого сайта было бы использование iframe и предоставление пользователю формы внутри iframe (или запуск XMLHttpRequest внутри фрейма, поскольку содержимое iframe находится на вашем собственном сервере, поэтому нет междоменной связи)

Если ваш встроенный скрипт отображает содержимое в диалоговом окне iframe, вам может потребоваться указать скрипту, встроенному на сайт клиента, когда закрывать iframe. Это может быть достигнуто, например, с помощью window.postMessage

Для postMessage см. http://ejohn.org/blog/cross-window-messaging/

Для междоменной связи см. http://softwareas.com/cross-domain-communication-with-iframes

2 голосов
/ 13 июля 2011

Вы можете посмотреть здесь - это пример API, созданного с использованием моей JsApiToolkit , платформы, позволяющей поставщикам услуг легко создавать и распространять инструменты, подобные Facebook Connect, длясторонние сайты.

Библиотека построена поверх easyXDM для междоменного обмена сообщениями и облегчает взаимодействие через модальные диалоги или всплывающие окна.

Код иreadme должно быть достаточно, чтобы объяснить, как все сочетается (это действительно не так уж сложно, если абстрагироваться от таких вещей, как XDM).

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

Таким образом, вам придется не только загружать загрузчик, но и заново загружать загрузчик, а не весь набор сценариев.

1 голос
/ 13 июля 2011

Рекомендуется добавлять как можно меньше кода в свой фрагмент кода, чтобы вам никогда не приходилось просить пользователей обновить их код.Например: 

<script type="text/javascript" src="http://your.site.com/somecode.js"></script>

Работает нормально, если автор вставит его на свою страницу.В противном случае, если вам нужен букмарклет, вы можете использовать этот код для загрузки своего скрипта на любой странице: 

  javascript:(function(){
    var e=document.createElement('script');
    e.setAttribute('language','javascript');
    e.setAttribute('src','http://your.site.com/somecode.js');
    document.head.appendChild(e);
  })();

Теперь весь ваш код будет жить по указанному выше URI, и при каждой загрузке их страницысвежая копия вашего кода будет загружена и выполнена.(без учета параметров кэширования)

Из этого сценария просто убедитесь, что вы не перекрываете пространства имен, и проверьте, существует ли библиотека перед загрузкой другой.Используйте безопасный jQuery объект вместо $, если вы его используете.А если вы хотите загрузить больше внешнего контента (например, jQuery, UI и т. Д.), Используйте обработчик onload, чтобы определить, когда они полностью загружены.Например: 

function jsLoad(loc, callback){
  var e=document.createElement('script');
  e.setAttribute('language','javascript');
  e.setAttribute('src',loc);
  if (callback) e.onload = callback;
  document.head.appendChild(e);
}

Затем вы можете просто вызвать эту функцию для загрузки любого js-файла и выполнить функцию обратного вызова. 

jsLoad('http://link.to/some.js', function(){
  // do some stuff
});

Теперь хитрый способ связи с вашим доменомизвлекать данные означает использовать JavaScript в качестве транспорта.Например: 

jsLoad('http://link.to/someother.js?data=xy&callback=getSome', function(){
  var yourData = getSome();
});

Вашему серверу придется динамически обрабатывать этот маршрут и возвращать некоторый javascript с функцией getSome, которая делает то, что вы хотите.Например: 

function getSome(){
  return {'some':'data','more':'data'};
}

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

0 голосов
/ 07 июля 2011

Вы можете использовать динамически сгенерированный (используйте, например, PHP или Ruby on Rails) для создания этого файла при каждом запросе) файл JS с вашего сервера, который импортируется с веб-сайта клиента, например: 

<script type="text/javascript" src="//www.yourserver.com/dynamic.js"></script>

Затем вы должны предоставить своим клиентам возможность решить, что они хотят, чтобы модал / всплывающее окно содержало (например, текст, графика, ссылки и т. Д.). Либо вы создаете простую CMS, либо вы делаете это вручную для каждого клиента.

Ваш сервер может видеть, откуда поступает каждый запрос на файл JS, и предоставлять на его основе другой код JS. Код JS может, например, вставить HTML-код на веб-сайт вашего клиента, который создает панель вверху с текстом и ссылкой.

Если вы хотите получить доступ к информации о посетителях своих клиентов, вам, вероятно, нужно либо прочитать ее из кода HTML, заставить своих клиентов предоставлять нужную информацию определенным образом или придумать другой способ доступа к ней с веб-сервера каждого клиента. ,

...