javascript - jQuery:交换包含嵌入视频的 div

Question

我有一个带有缩略图网格的页面。有些拇指打开图像，有些打开嵌入视频，所有这些都打开到 Bootstrap3 模式中。为了尝试“杀死”模式被关闭/隐藏后仍在播放的视频，我一直在尝试一些jquery函数(空，删除)，它们工作得很好，直到我必须重新打开或打开另一个模式，所以现在我正在使用replaceWith 进行一些div 交换，这对于照片和youtube 嵌入也完全按照预期工作，但不适用于Instagram 视频嵌入。每次页面刷新我只能成功加载 1 个 IG 视频。对 IG 嵌入的任何后续调用似乎都不会与 IG 建立连接。这是我目前所在位置的示例:

<a id="myButton" role="button" onclick="showEmbed(0);">CLICK ME (0)</a>
<a id="myButton" role="button" onclick="showEmbed(1);">CLICK ME (1)</a>


<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-body">
        <div id="inner"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>

<script>
    var showEmbed = function(id) {

      var embed = instagram[id]['embed'];  // grab the IG embed from array
      var newDiv = $(document.createElement('div'));  // create newDiv
      newDiv.attr('id', `newDiv${ id }`);  // add distinct ID to newDiv
      newDiv.append(embed);  // add the embed to the newDiv
      $('#inner').replaceWith(newDiv); // replace placeholder div with newDiv
      $('#myModal').modal('show');  // show the modal


      $('#myModal').on('hidden.bs.modal', function() {
        var inner = $(document.createElement('div'));  // on modal dismiss, remake placeholder div
        inner.attr('id', "inner"); 
        newDiv.replaceWith(inner); // replace the above created newDiv with the recreated placeholder div
      });

    }
  </script>

这就是事情发生的样子:

1) 在激活任何模态框之前，您可以看到空的 div #inner:

2) #inner 被 #newDiv0 替换，其中现在包含嵌入代码(可以正确显示):

3) 一旦模态被关闭，#inner 将被重新创建并替换 #newDiv0，因为模态被隐藏:

4) 就像步骤 2 一样，#inner 再次被替换，但现在替换为 #newDiv1(这也是 IG 视频嵌入)，但是这次 iframe 丢失，网络选项卡显示没有与 Instagram 的连接:

任何人都可以解释为什么这不起作用并建议解决方法吗？感谢您的阅读，我知道这是一篇很长的文章。

Answer 1

我能够得到plnkr上类。一些事情。

1. 在正文中仅包含一次嵌入脚本。

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

2. 将下面的 window.instgrm 调用添加为 switch 函数的最后一行。

    $('#myModal').modal('show');  // show the modal
    window.instgrm.Embeds.process();
   

3. 从所有嵌入项目中删除 embed.js 脚本。

4. 可以选择将 OMITSCRIPT=true 添加到您的嵌入链接(这样 embed.js 就不会为每个项目加载)。