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

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

http://jsbin.com/hilixi/1/edit?html,js, выход

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

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

спасибо, Мэтт!--1-->

10
instagram javascript jquery

3 ответов

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

window.instgrm.Embeds.process()

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

55

в вашем приложении.JS создайте директиву для добавления элемента скрипта:

.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>
0

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

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