Встраивание в Instagram не работает при динамическом добавлении

Question

Работа над блогом, который загружает сообщения на бесконечном скроллере. Каждый пост в блоге может иметь или не иметь встраивания в Instagram. Я обнаружил, что первый, отображаемый на странице, будет обработан (независимо от того, находится ли он в исходной разметке страницы или добавлен динамически), а следующие - нет. Вот простой JS Bin, который иллюстрирует проблему:

http://jsbin.com/hilixi/1/edit?html,js,output

Первая вставка в Instagram находится в начальной разметке страницы. Еще одна вставка в Instagram добавляется после загрузки страницы, через 4 секунды. Второе добавление встраивания не обрабатывается.

Есть идеи почему? Кажется, скрипт для вставки в Instagram будет запущен только один раз. В любом случае, я могу заставить его освежиться?

Спасибо Мэтт

Answer 1

Скрипт embed.js, который поставляется с кодом для встраивания в Instagram, имеет функцию процесса, которую вы можете вызвать.

window.instgrm.Embeds.process()

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

Answer 2

В вашем app.js создайте директиву для добавления элемента script:

.directive('externalscript', function() {
   var injectScript = function(element) {
    var instagramScript = angular.element(document.createElement('script'));
    instagramScript.attr('async defer');
    instagramScript.attr('charset', 'utf-8');
    instagramScript.attr('src', 'http://platform.instagram.com/en_US/embeds.js');
    instagramScript.attr('onload', 'window.instgrm.Embeds.process()');
    element.append(instagramScript);
    var twitterScript = angular.element(document.createElement('script'));
    twitterScript.attr('async defer');
    twitterScript.attr('charset', 'utf-8');
    twitterScript.attr('src', 'http://platform.twitter.com/widgets.js');
    element.append(twitterScript);
};

  return {
      link: function(scope, element) {
          injectScript(element);
      }
  };
})

а затем в вашем вызове просмотра HTML:

<div externalscript></div>

Answer 3

Вставка этого в область верхнего и нижнего колонтитула работала для меня в блоге WordPress.

<script async="" defer="defer" src="//platform.instagram.com/en_US/embeds.js"></script>