使用 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 的 post，我需要做的就是在我的 html 中包含 <\blockquote>，并能够加载 //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 嵌入需要在 //platform.instagram.com/en_US/embeds.js 包含后使用 window.instgrm.Embeds.process(); "activated"。

我仍然无法使用 require 加载模块，文件包含仍然超时，但我设法通过 index.html 中的 <script> 标签包含它来使其工作：

        /* 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...）

使用 requirejs 嵌入 instagram 视频

Embed instagram video using requirejs

embed

requirejs

instagram