web-dev-qa-db-ja.com

埋め込みを動的に追加すると、Instagramの埋め込みが機能しない

無限のスクローラーに投稿を読み込むブログに取り組んでいます。各ブログ投稿には、Instagramが埋め込まれている場合とされていない場合があります。ページに表示される最初のページが処理されることがわかりました（最初のページマークアップにあるか、動的に追加されるかに関係なく）、次のページは処理されません。問題を説明する簡単なJSビンを次に示します。

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

最初のInstagramの埋め込みは、最初のページのマークアップにあります。別のInstagram埋め込みは、ページの読み込み後、4秒後に追加されます。 2番目の埋め込み追加は処理されません。

なぜ何かアイデアはありますか？ Instagramの埋め込みスクリプトは1回しか実行されないようです。強制的に更新する方法はありますか？

ありがとう、マット

javascriptjqueryinstagram
12
m4olivei

Instagramの埋め込みコードに付属するembed.jsスクリプトには、呼び出すことができるプロセス関数があります。

window.instgrm.Embeds.process()

動的コンテンツが読み込まれるたびにそれを使用してください。

68
narwic

これをヘッダーとフッターの領域に挿入すると、WordPressブログでうまくいきました。

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

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>
0
Darko Kostic