Embed Instagram Video mit Requirejs

Question

Ich versuche Instagram-Video in meine Single-Page-Anwendung mit Requirejs einbetten.

Das einbetten Stück Code von instagram ist wie folgt:

<\blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="6" style=" bunch of css ">bunch of html<\/blockquote> 
<\script async defer src="//platform.instagram.com/en_US/embeds.js"><\/script> 

Jetzt alles, was ich tun müssen, um instagram der Beitrag anzuzeigen auf meiner Website einbinden <\blockquote> in meinem html ist, und in der Lage sein //platform.instagram.com/en_US/embeds.js Skript zu laden .

Das Problem ist, dass, da ich requirejs benutze, kann ich nicht nur das <\script> Tag in den HTML-Code, ich muss es mit erfordern laden. Um dies zu tun, habe ich diese Lösungen versucht:

Ich erstellte eine JS-Datei mit "// platform.instagram.com/en_US/embeds.js" -Code. In require.config.js:

paths: {"instagram-embed": "/path/to/embed.js/file"} 

einschließlich es nur in meinem Viewmodel:

define(["instagram-embed"], function(){}); 

Diese Lösung funktioniert nicht.

Ich habe auch versucht es mit dem Asynchron-Plugin geladen:

define("async!http://platform.instagram.com/en_US/embeds.js", function(){} 

requirejs nur Timeout, wenn es zu laden versucht.

Ich habe keine Ideen mehr. Bitte helfen Sie.

Answer 1

Ich habe eine funktionierende Lösung gefunden, aber es ist nicht wirklich sauber.

Die Sache ist, dass Instagram embed muss mit window.instgrm.Embeds.process(); nach //platform.instagram.com/en_US/embeds.js Einschluss "aktiviert" werden. Verwendung erfordern, Timeout noch auf File Inclusion

Ich kann immer noch nicht das Modul laden, aber ich schaffe es es, indem funktioniert durch ein <script> Tag in meinem index.html:

 /* REQUIRE CONFIG AND STARTUP */ 
     <script src="app/require.config.js"></script> 
     <script data-main="app/startup" src="bower_modules/requirejs/require.js"></script> 

     /* INSTAGRAM EMBBEDS */ 
     <script async defer src="//platform.instagram.com/en_US/embeds.js"></script> 
     <script type="text/javascript"> 
      function instagramEmbbedCheck() { 
       if (typeof window.instgrm === 'undefined') 
        setTimeout(instagramEmbbedCheck, 3000); 
       else 
        window.instgrm.Embeds.process(); 
      } 
      instagramEmbbedCheck(); 
     </script> 

Ich brauche ein setTimeout von mindestens 2 Sekunden zu verwenden, damit dies funktioniert und es ist ein großes Problem. Für jetzt ist es die einzige Weise, die ich instagram embeds in meiner Website durch require (nicht wirklich durch requirejs) gefunden habe