动态添加嵌入时，Instagram 嵌入不起作用

Posted 2023-03-31

【中文标题】动态添加嵌入时，Instagram 嵌入不起作用

【英文标题】：Instagram embeds not working when adding embeds dynamically

【发布时间】：2014-12-10 19:07:10

【问题描述】：

在一个无限滚动加载帖子的博客上工作。每篇博文可能会或可能不会嵌入 Instagram。我发现页面上显示的第一个将得到处理（无论它是在初始页面标记中，还是动态添加），下面的则不会。下面是一个简单的 JS Bin 来说明问题：

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

第一个 Instagram 嵌入在初始页面标记中。页面加载后 4 秒后添加另一个 Instagram 嵌入。第二个嵌入添加没有得到处理。

任何想法为什么？ Instagram 嵌入脚本似乎只会运行一次。有什么办法可以强制刷新？

谢谢， 马特

【参考方案1】：

Instagram 的嵌入代码自带的 embed.js 脚本有一个可以调用的处理函数。

window.instgrm.Embeds.process()

只要在加载动态内容时使用它即可。

【讨论】：

呵呵，你不说。谢谢你，先生。你是一个学者，一个绅士。

必须在我的

【参考方案2】：

在您的 app.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>

【参考方案3】：

在 WordPress 博客中将其插入页眉和页脚区域对我有用。

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