jQuery appending Instagram's blockquote embedding dynamically doesn't work

问题

I have a jQuery script that appends the Instagram blockquote, but it doesn't work on the second append. The first time it gets appended, the blockquote converts to the iframe like it should, but if I try it again, it just stays a 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);
}

The idea is when this function gets excecuted, the blockquote gets appended through updateContent()

回答1:

i found out that instagram has this

window.instgrm.Embeds.process()

Which needed to be executed each time.

回答2:

The javascript tag you're appending won't be executed as you have it coded. I've mocked up something that should help:

<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>

For more info, have a look here: How to Append <script></script> in javascript?

来源：https://stackoverflow.com/questions/45444920/jquery-appending-instagrams-blockquote-embedding-dynamically-doesnt-work

标签

javascript

jquery

instagram