Javascript Instagram嵌入在首次调用后不工作

因此，我有一个表格，您可以在其中选择不同的帖子（即

按钮

），这将在侧面板中打开一个iFrame，其中包含所选用户的嵌入帖子

对于

Twitter

来说，一切都很好，但是对于

Instagram

来说，在第一篇嵌入文章之后的任何内容都不会显示正常的嵌入。用户名、发布日期、跟随按钮、喜欢按钮和评论按钮都缺失。此外，照片将替换为灰色的

Instagram

徽标。现在只有标题了。解决此问题的唯一方法是刷新页面，然后我将能够加载任何

Instagram

post，但这种行为在首次发布后仍会继续

以下是正在进行的调用的JS代码片段：

if (postObj['instagram']) {
    var iFrameSizeIG = 400; // Must be AT LEAST 320
    $.ajax({
        type: "GET",
        url: "http://api.instagram.com/oembed?url=" + postObj.url + "&maxwidth=" + iFrameSizeIG,
        crossDomain: true,
        headers: { 'Access-Control-Allow-Methods': 'GET, POST, PUT' },
        async: true,
        dataType: "jsonp",
        success: function (data) {
            console.log("Loading Instagram post in iframe: " + postObj.url);
            $("#post-body").append($('<div>').addClass("post-view").append(
                $('<div>', { "style": "padding-top: 10px;"})
                    .append($('<span>').addClass('bold').text("User Post: "))
                    .append(data.html)))
        },
        error: function () {
            alert("Error Occured");
        }
    });
}

if (postObj['twitter']) {
    $.ajax({
        type: "GET",
        url: "https://api.twitter.com/1/statuses/oembed.json?url=" + postObj.url,
        crossDomain: true,
        headers: { 'Access-Control-Allow-Methods': 'GET, POST, PUT' },
        async: true,
        dataType: "jsonp",
        success: function (data) {
            console.log("Loading Twitter post in iframe: " + postObj.url);
            $("#post-body").append($('<div>').addClass("post-view").append(
                $('<div>', { "style": "padding-top: 10px;"})
                    .append($('<span>').addClass('bold').text("User Tweet: "))
                    .append(data.html)))
        },
        error: function () {
            alert("Error Occured");
        }
    });
}

if（postObj['instagram']）{
var iFrameSizeIG=400；//必须至少为320
$.ajax({
键入：“获取”，
url:“http://api.instagram.com/oembed?url=“+postObj.url+”&maxwidth=“+iframesizeg，
跨域：是的，
标题：{'Access Control Allow Methods'：'GET，POST，PUT'}，
async:true，
数据类型：“jsonp”，
成功：功能（数据）{
log（“在iframe中加载Instagram帖子：“+postObj.url”）；
$（“#post body”）.append（$（''）.addClass（“post view”）.append(
$（''，{“样式”：“顶部填充：10px；”}）
.append（$（''）.addClass（'bold'）.text（“用户帖子：））
.append（data.html）））
},
错误：函数（）{
警报（“发生错误”）；
}
});
}
if（postObj['twitter']）{
$.ajax({
键入：“获取”，
url:“https://api.twitter.com/1/statuses/oembed.json?url=“+postObj.url，
跨域：是的，
标题：{'Access Control Allow Methods'：'GET，POST，PUT'}，
async:true，
数据类型：“jsonp”，
成功：功能（数据）{
log（“在iframe中加载Twitter帖子：“+postObj.url”）；
$（“#post body”）.append（$（''）.addClass（“post view”）.append(
$（''，{“样式”：“顶部填充：10px；”}）
.append（$（''）.addClass（'bold'）.text（“用户推文：））
.append（data.html）））
},
错误：函数（）{
警报（“发生错误”）；
}
});
}

---

我不确定这是否是一个已知问题或如何解决。我已经在Firefox和Chrome中进行了测试，并且在这两种浏览器中都可以使用。

我也遇到了这个问题。解决了，我也有这个问题。解决了。