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

在博客上工作,在无限卷轴上加载post。 每篇博文都可能有也可能没有Instagram嵌入。 我发现页面上显示的第一个将被处理(无论它是在初始页面标记中,还是动态添加),以下都不会。 这是一个简单的JS Bin,它说明了这个问题:

第一个Instagram嵌入是在初始页面标记中。 在4秒后页面加载后添加另一个Instagram嵌入。 第二个嵌入添加不会被处理。

有什么想法吗? 看来Instagram嵌入脚本只运行一次。 我有什么方法可以强迫它刷新?

谢谢,马特

Instagram的嵌入代码附带的embed.js脚本有一个可以调用的过程函数。

window.instgrm.Embeds.process() 

只要加载动态内容,就可以使用它。

在你的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视图中调用:

 

将其插入页眉和页脚区域在WordPress博客中为我工作。