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

Posted 2023-05-09

【中文标题】删除 iframe 后有没有办法重新加载？

【英文标题】：is there a way to reload after removing an 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   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   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 怎么样？ ***.com/a/30358006/3702797

我将使用@amal 方法，他解决了我的问题，同时让代码保持不变。感谢您的帮助

【参考方案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

希望对你有帮助