Javascript jQuery附加Instagram'；s blockquote动态嵌入不'；行不通_Javascript_Jquery_Instagram

Javascript jQuery附加Instagram'；s blockquote动态嵌入不'；行不通

javascript jquery instagram

Javascript jQuery附加Instagram'；s blockquote动态嵌入不'；行不通,javascript,jquery,instagram,Javascript,Jquery,Instagram,我有一个jQuery脚本附加Instagram blockquote，但在第二个附加上不起作用。第一次追加时，blockquote会像它应该的那样转换为iframe，但如果我再次尝试，它将保持为blockquote function appendInstagram($controls){ var instagramURL = $('#js-instagram-url-edit').val(); var instagramScript = '<script async defer s

我有一个jQuery脚本附加Instagram blockquote，但在第二个附加上不起作用。第一次追加时，blockquote会像它应该的那样转换为iframe，但如果我再次尝试，它将保持为blockquote

function appendInstagram($controls){
  var instagramURL = $('#js-instagram-url-edit').val();
  var instagramScript = '<script async defer src="//platform.instagram.com/en_US/embeds.js"><\/script>'
  var instagramHtml = $('<blockquote class="instagram-media" 
                         data-instgrm-captioned data-instgrm-version="7">
                           <div style="padding:8px;"> 
                             <a href="'+instagramURL+'" target="_blank"></a>
                           </div>
                         </blockquote>' + instagramScript);
  updateContent(instagramHtml, $controls);
}

函数appendInstagram（$controls）{
var instagramURL=$（'#js instagram url edit'）.val（）；
var instagramScript=“”
var instagramHtml=$（'
“+instagramScript）；
updateContent（instagramHtml$controls）；
}

其思想是，当这个函数被执行时，blockquote将通过

updateContent（）

被追加的javascript标记在编码时不会被执行。我已经模拟了一些应该有用的东西：

<html>
<head><title>test</title>

<script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<script>
function appendInstagram($controls){
  var instagramURL = $("#url").val();

  var instagramHtml = '<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="7">' +
                            '<div style="padding:8px;"><a href="'+instagramURL+'" target="_blank"></a></div>' +
                        '</blockquote>'; // + instagramScript;

  $("#test").html(instagramHtml);
}

$(document).ready(function() {
    appendInstagram(null);

    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "https://platform.instagram.com/en_US/embeds.js";
    s.async = true;
    $("#test").append(s);
});
</script>
</head>
<body>
<div id="test">

</div>
<input type="text" id="url" value="https://www.instagram.com/p/BW52LY1FMdf/?taken-by=birminghamfencingclub_bfc" />

</body>
</html>


测试
函数附加Instagram（$controls）{
var instagramURL=$（“#url”）.val（）；
var instagramHtml=“”+
'' +
''；/+instagramScript；
$（“#测试”）.html（instagramHtml）；
}
$（文档）.ready（函数（）{
附录图（空）；
var s=document.createElement（“脚本”）；
s、 type=“text/javascript”；
s、 src=”https://platform.instagram.com/en_US/embeds.js";
s、 异步=真；
$（“#测试”）。追加；
});

有关更多信息，请查看此处：

我发现instagram有此功能

window.instgrm.Embeds.process()

每次都需要执行