requirejs - 使用 requirejs 嵌入 instagram 视频

Question

我正在尝试使用 requirejs 将 instagram 视频嵌入到我的单页应用程序中。

来自instagram的嵌入代码如下:

<\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>

现在我需要做的就是在我的网站上显示 instagram 的帖子，包括 <\blockquote>在我的 html 中，并能够加载 //platform.instagram.com/en_US/embeds.js脚本。

问题是因为我使用的是 requirejs , 我不能只把 <\script> html 中的标记，我必须使用 require 加载它。为此，我尝试了这些解决方案:

我使用“//platform.instagram.com/en_US/embeds.js”代码创建了一个 js 文件。在 require.config.js 中:

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

并将其包含在我的 viewModel 中:

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

此解决方案无效。

我也试过用异步插件加载它:

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

requirejs 只是在尝试加载它时超时。

我没主意了。请帮忙。

Answer 1

我找到了一个可行的解决方案，但它不是很干净。

问题是 instagram embed 需要使用 window.instgrm.Embeds.process(); 来“激活”在 //platform.instagram.com/en_US/embeds.js 之后包容。

我仍然无法使用 require 加载模块，文件包含仍然超时，但我设法通过 <script> 包含它来使其工作我的 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>

我需要使用至少 2 秒的 setTimeout 才能工作，这是个大问题。目前，这是我发现通过 require 在我的网站中使用 instagram 嵌入的唯一方法(不是真正通过 requirejs...)