如何修复Page2退出按钮无法移除已运行多YouTube播放器问题

架构老林

2026-8-12

问题解决方案

问题原因

原removePlayerHandler函数仅获取退出按钮最近的.remove容器内的播放器，而Page2的退出按钮位于独立容器，无法触达其他播放器所在的容器，导致无法移除所有已启动的YouTube播放器。

修改方案

修改removePlayerHandler函数，直接遍历目标范围内的所有播放器容器，销毁其中的播放器实例：

方案1：移除页面所有已启动的播放器

function removePlayer(wrapper) {
  wrapper.player.destroy();
  delete wrapper.player;
  console.log("removePlayer");
}

function removePlayerHandler(evt) {
  // 查找页面上所有播放器容器
  const wrappers = document.querySelectorAll(".wrap");
  wrappers.forEach(wrapper => {
    if (wrapper.player) {
      removePlayer(wrapper);
    }
  });
}

方案2：仅移除Page2内的播放器（更精准）

如果需要避免影响其他页面的播放器，给Page2的根容器添加类名（比如page2），然后限定查找范围：

function removePlayer(wrapper) {
  wrapper.player.destroy();
  delete wrapper.player;
  console.log("removePlayer");
}

function removePlayerHandler(evt) {
  // 仅查找Page2容器内的播放器
  const page2Wrappers = document.querySelector(".page2").querySelectorAll(".wrap");
  page2Wrappers.forEach(wrapper => {
    if (wrapper.player) {
      removePlayer(wrapper);
    }
  });
}