按钮控制Div显示隐藏功能异常，求助排查问题

核心问题在于Buzzsprout的嵌入脚本会在页面加载时立即执行，而你初始状态下通过display:none隐藏了player2容器——脚本执行时容器不可见，导致播放器无法正常渲染。Cookie设置和CORS并非当前问题的关键（本地不切换时能正常显示已验证）。

解决方案一：动态加载播放器脚本 #

移除HTML中预先嵌入的Buzzsprout脚本，改为在切换到对应播放器时再动态加载脚本，确保脚本执行时容器处于可见状态。

修改后的HTML #

<div class="podcast-player">
  <div id="player1">
    <div id='buzzsprout-small-player'></div>
  </div>
  <div id="player2">
    <div id='buzzsprout-large-player'></div>
  </div>
</div>

修改后的JavaScript #

// 标记脚本是否已加载，避免重复加载
const loadedScripts = {
  small: false,
  large: false
};

// 动态加载Buzzsprout播放器脚本的函数
function loadPlayerScript(playerType, containerId) {
  if (loadedScripts[playerType]) return;
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.charset = 'utf-8';
  script.src = `https://www.buzzsprout.com/2107108.js?container_id=${containerId}&player=${playerType}`;
  document.body.appendChild(script);
  loadedScripts[playerType] = true;
}

// 初始化默认激活player1并加载对应脚本
document.getElementById("player1-button").classList.add("active");
document.getElementById("player1").classList.add("active");
loadPlayerScript('small', 'buzzsprout-small-player');

// player1切换事件
document.getElementById("player1-button").addEventListener("click", function() {
  document.getElementById("player2-button").classList.remove("active");
  document.getElementById("player2").classList.remove("active");
  
  document.getElementById("player1").classList.add("active");
  this.classList.add("active");
  
  loadPlayerScript('small', 'buzzsprout-small-player');
});

// player2切换事件
document.getElementById("player2-button").addEventListener("click", function() {
  document.getElementById("player1-button").classList.remove("active");
  document.getElementById("player1").classList.remove("active");
  
  document.getElementById("player2").classList.add("active");
  this.classList.add("active");
  
  loadPlayerScript('large', 'buzzsprout-large-player');
});

解决方案二：修改隐藏方式（无需改动脚本） #

如果不想修改脚本加载逻辑，可以把display:none替换为不影响DOM渲染的隐藏方式，让脚本执行时容器在页面中是“存在”的：

修改后的CSS #

.podcast-player div:not(.active) {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.podcast-player div.active {
  visibility: visible;
  height: auto;
  margin: initial;
  padding: initial;
}

这种方式通过隐藏可见性、压缩高度来实现视觉隐藏，但容器仍保留DOM结构，脚本可以正常渲染播放器。

内容的提问来源于stack exchange，提问作者OneRyt