o嵌入仅加载 Instagram 帖子的标题答案

【问题标题】：oEmbed loading only caption of Instagram posto嵌入仅加载 Instagram 帖子的标题
【发布时间】：2016-01-24 21:11:12
【问题描述】：

我正在尝试使用 Instagram API 将特定用户的最新帖子加载到页面。根据 API 文档，仅使用所需图片的短链接，oEmbed 响应应该包含您单击图片本身上的“嵌入”链接所获得的所有内容。

这是我的代码：

window.onload = function () {
    var insta = new XMLHttpRequest();
    var embed = document.getElementById('embed');
    insta.open("GET",   "https://api.instagram.com/v1/users/user/media/recent/?access_token=my-token");
    insta.send();
    insta.addEventListener("load", function(){
        var jsonResponse = JSON.parse(insta.responseText);
        var lastImageLink = jsonResponse.data[0].link;
        var shortCode = lastImageLink.split("/p/")[1];
        var url = "https://api.instagram.com/oembed?url=http://instagr.am/p/" + shortCode;
        var getLatest = new XMLHttpRequest;
        getLatest.open("GET", url);
        getLatest.send()
        getLatest.addEventListener("load", function(){
            getLatest = JSON.parse(getLatest.responseText);
            embed.innerHTML = getLatest.html;
        });
    });
};

所以我做了一个 GET 请求来获取上一篇文章的链接，从中获取短链接后缀，然后使用该短链接执行另一个 GET 请求，以通过 oEmbed 方法获取嵌入代码。但是，当我加载页面时，我看到的只是：

我尝试过的：

*我知道 API 依赖于 embeds.js 库，所以我将它移到了 html 文档的头部并使其同步加载。结果没有变化。

*加载除了最新帖子之外的不同图片。那里也没有变化。

这就是我能想到的。是否有任何原因我无法通过我正在做的事情获得完整的嵌入式帖子？

谢谢！

【问题讨论】：

标签： javascript instagram-api oembed

【解决方案1】：

对于那些仍然遇到这个问题的人。发生这种情况是因为设置容器的 innerHTML 不会导致包含的标签加载其源代码，因此永远不会加载 Instagram embed.js，并且嵌入无法正确处理。

您需要以下内容：

包含来自https://platform.instagram.com/en_US/embeds.js 的instagram embed.js
在将容器的 innerHTML 设置为 oembed 数据的 html 字段后，调用 instgrm.Embeds.process()。
可选，但建议：将 omitscript=true 参数添加到 oembed 请求。顾名思义，这会从返回的 html 中省略标记。

不需要访问令牌，您可以使用单个 XMLHttpRequest 摆脱困境，如下所示：

<script src="https://platform.instagram.com/en_US/embeds.js"></script>
<script>

    var url = "https://api.instagram.com/oembed?omitscript=true&url=http://instagr.am/p/" + shortCode;
    var embed = document.getElementById('embed');
    var req = new XMLHttpRequest;
    req.open("GET", url);
    req.send()
    req.addEventListener("load", function(){
        parsed = JSON.parse(req.responseText);
        embed.innerHTML = parsed.html;
        instgrm.Embeds.process(); // DON'T FORGET THIS
    });

</script>

我已经简化了代码以专注于该问题，但当然，在调用 instgrm.Embeds.process() 之前确保 embed.js 已正确加载。

【讨论】：

谢谢！真的很有帮助；）

【解决方案2】：

使用 iframe 嵌入来加载图像，如下所示：

<iframe src="https://www.instagram.com/p/8_kRtJBsBq/embed" width="400" height="480" frameborder="0" scrolling="no" allowtransparency="true"></iframe>

不使用API获取嵌入代码，只需获取短代码并替换上面的iframe代码sn-p。

您可以在此处生成 Instagram iframe 嵌入代码并预览：http://www.gramfeed.com/instagram/embed#https://www.instagram.com/p/8_kRtJBsBq/

【讨论】：

【解决方案3】：

您需要在 insta 回调函数中包含条件：

insta.onload = function() {
    if (insta.readyState === 4) {
        if (insta.status === 200) {
            //do some stuff
        }
    }
}

readystate 让您知道您的请求处于什么状态。如您所见here，有 5 个可能的值，最后一个是 4，或 DONE。在达到最终状态之前，您不希望回调运行。第二个条件是检查服务器响应的类型。如果是 200（成功），您希望它执行您的成功代码。如果服务器响应页面未找到错误，您还需要检查 404 并进行一些损坏控制。

另外，在第 11 行，请确保您正确声明了变量：您的构造函数需要括号：var getLatest = new XMLHttpRequest();

【讨论】：