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博客中为我工作。