删除 iframe 后有没有办法重新加载？答案

【问题标题】：is there a way to reload after removing an iframe?删除 iframe 后有没有办法重新加载？
【发布时间】：2021-08-25 02:44:01
【问题描述】：

1 和 3 是按钮的 id，v1 和 v3 是 iframe（嵌入 youtube）的 id。我已经使用了一个简单的 .show() 和 .hide()，但隐藏 iframe 的音频仍然存在，所以我使用的是 .remove() 和 .show()。当我使用 .remove() 时，另一个 iframe 完全消失了，只剩下 iframe 是我按下的那个我想要的按钮。但是当我按下按钮 3 时，移除的 iframe 无法加载，有没有办法重新加载它？

我使用的 iframe 是：-

<iframe width="560" height="315" id="v1" src="https://www.youtube.com/embed/xGRjCa49C6U?modestbranding=1&controls=0&autoplay=1&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" ></iframe>

<iframe width="560" height="315" id="v3" src="https://www.youtube.com/embed/9V9wr1AaIxY?modestbranding=1&controls=0&autoplay=1&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" ></iframe>

这是 js:-

$(function(){

  $('#1').on('click',function(){
    $('#v1').show();
        var getframe = document.getElementById("v3");
       getframe.remove();

  });

  $('#3').on('click',function(){
    $('#v3').show();
var getframe = document.getElementById("v1");
       getframe.remove();

  });

});

【问题讨论】：

修复 X-Y 问题的 X 怎么样？ stackoverflow.com/a/30358006/3702797
我将使用@amal 方法，他解决了我的问题，同时让代码保持不变。感谢您的帮助

标签： javascript html jquery iframe

【解决方案1】：

Remove() 方法将元素从 dom 中移除，并且很难重新加载。

所以这可以像下面这样完成。

加载 YouTube iFrame API：-

<script src="https://www.youtube.com/iframe_api"></script>

创建两个引用现有 iFrame 的不同播放器

$(function(){
window.YT.ready(function() {
var player1 = new YT.Player('v1');
var player3 = new YT.Player('v3');

$('#1').on('click',function(){
    $('#v1').show();
    player1.unMute();
    
    $('#v3').hide();
    player3.mute();
  });

  $('#3').on('click',function(){
    $('#v3').show();
    player3.unMute();
    
    $('#v1').hide();
    player1.mute();
  });
});
});

Demo

希望对你有帮助

【讨论】：