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的帖子，就是在我的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

我找到了一个有效的解决方案，但它并不是真的很干净。

问题是，在window.instgrm.Embeds.process();加入//platform.instagram.com/en_US/embeds.js之后，需要使用<script>“激活”Instagram嵌入。

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

import oracle.iam.passwordmgmt.api.PasswordMgmtService;
import oracle.iam.passwordmgmt.domain.generator.RandomPasswordGeneratorImpl;

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

使用requirejs嵌入instagram视频

1 个答案: