При скролле подключаем скрипт?

341

14 декабря 2017, 00:51

Приветствую! Попробовал при скролле подключить скрипт

if ($(window).scrollTop() > 0) {
  $('.test').after().html('<script type="text/javascript" src="//vk.com/js/api/openapi.js?150"></script> <div id="vk_community_messages"></div><script type="text/javascript"> VK.Widgets.CommunityMessages("vk_community_messages", 127607773, {expanded: "1",tooltipButtonText: "Есть вопрос?"});</script>');
}

но ничего не получилось не работает почему то, и не могу понять почему. Помогите разобраться в чем проблема.

Answer 1

Скрипт openapi.js я бы подключал в документе изначально, но даже если динамически, то это лучше делать с помощью метода $.getScript() или $.ajax() с соответствующим значением параметра dataType. Во-вторых, необходимо экранировать кавычки, слеши в исполняемом коде, который вы добавляете на страницу. И в-третьих, при каждом событии scroll (если обработчик у вас вообще установлен) и верном условии scrollTop > 0, будет опять выполняться подключение API и вывод на страницу кода виджета. Поэтому, этот момент тоже я бы отслеживал:

var getApi = true;
$(window).on('scroll', function() {
  if ($(window).scrollTop() > 0 && getApi) {
    getApi = false;
    $.getScript('//vk.com/js/api/openapi.js?150', function() {
      $('.test').after().html('<div id="vk_community_messages">OOO</div><script type="text/javascript"> VK.Widgets.CommunityMessages(\"vk_community_messages\", 127607773, {expanded: \"1\",tooltipButtonText: \"Есть вопрос?\"});<\/script>');
    });
  }
});