如何阻止外部脚本重复创建YT.Player实例？

以下是几个可行的规避方案，针对你无法移除外部脚本的场景：

方案1：劫持YT.Player构造函数，复用已有实例 #

在你的loadPlayer执行前，替换全局的YT.Player构造函数，缓存已创建的实例，后续调用时直接返回缓存的实例而非新建：

// 提前注入劫持逻辑，要在loadPlayer和外部脚本执行前运行
(function hijackYTPlayer() {
  const OriginalPlayer = window.YT.Player;
  const playerCache = new Map<string, YT.Player>();

  // 替换构造函数
  window.YT.Player = function (containerId: string, options?: YT.PlayerOptions) {
    // 检查目标容器是否已有实例
    if (playerCache.has(containerId)) {
      return playerCache.get(containerId)!;
    }
    // 创建新实例并缓存
    const newPlayer = new OriginalPlayer(containerId, options);
    playerCache.set(containerId, newPlayer);
    return newPlayer;
  };

  // 保留原构造函数的静态属性和原型链，避免外部脚本报错
  Object.assign(window.YT.Player, OriginalPlayer);
  window.YT.Player.prototype = OriginalPlayer.prototype;
})();

// 你的原有loadPlayer函数
function loadPlayer() {
  new window.YT.Player('youtube id', { /* ...somesettings */ });
}

这个方法能确保不管谁调用YT.Player，只要目标容器已有实例，就不会重复创建，同时完全兼容原构造函数的所有用法。

方案2：修改/移除外部脚本的目标容器 #

如果外部脚本固定使用id="youtube"的容器，在你的代码执行后，直接修改这个容器的标识或移除它，让外部脚本找不到绑定目标：

function loadPlayer() {
  const player = new window.YT.Player('youtube id', { /* ...somesettings */ });
  
  const targetContainer = document.getElementById('youtube');
  if (targetContainer) {
    // 方案A：修改容器ID，让外部脚本找不到
    targetContainer.id = 'youtube-inactive';
    // 方案B：直接移除容器（如果不影响页面布局）
    // targetContainer.remove();
    // 方案C：隐藏容器并标记已初始化
    // targetContainer.style.display = 'none';
    // targetContainer.dataset.playerInitialized = 'true';
  }
  
  return player;
}

这种方式简单直接，适合外部脚本硬编码容器ID的场景。

方案3：覆盖外部脚本的loadElement函数 #

直接替换全局的loadElement函数，让它执行时跳过创建Player的逻辑：

// 要在外部脚本加载完成后、loadElement被调用前执行这段代码
// 如果外部脚本是动态加载的，可以用MutationObserver监听或短时间轮询
window.loadElement = function() {
  // 空实现，阻止创建新实例
  console.log('外部脚本的loadElement已被拦截');
};

// 如果你需要保留外部脚本的其他逻辑，仅移除创建Player的部分：
// window.loadElement = function() {
//   // 在这里保留你需要的原逻辑，删掉new YT.Player那行
// };

因为外部脚本定义的loadElement是全局函数，你可以直接覆盖它，从根源阻止重复创建行为。

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