我正在尝试使用 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 只是在尝试加载它时超时。
我没主意了。请帮忙。
最佳答案
我找到了一个可行的解决方案,但它不是很干净。
问题是 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...)
关于requirejs - 使用 requirejs 嵌入 instagram 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37121853/