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

Question

1和3是button的id，v1和v3是iframe(youtube embedded)的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();

  });

});

Answer 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

希望对您有所帮助

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

is there a way to reload after removing an iframe?

html

javascript

iframe

jquery