JavaScript 多链接切换iframe视频源如何简化重复代码

现有代码的重复逻辑完全可以通过批量遍历的方式消除，不需要为每个链接单独绑定事件，下面提供两种可直接落地的实现：

方案1：最小改动版（兼容现有代码结构） #

不需要修改已有的videoLinks配置，直接遍历配置对象的键批量绑定事件即可，同时提前缓存iframe元素减少DOM查询，增加容错判断避免元素不存在时报错。

const videoLinks = {
  m1: "https://www.youtube-nocookie.com/embed/myvideo",
  m2: "https://www.youtube-nocookie.com/embed/myvideo",
  m3: "https://www.youtube-nocookie.com/embed/myvideo",
  m4: "https://www.youtube-nocookie.com/embed/myvideo",
  m5: "https://www.youtube-nocookie.com/embed/myvideo",
  m6: "https://www.youtube-nocookie.com/embed/myvideo",
  m7: "https://www.youtube-nocookie.com/embed/myvideo",
  m8: "https://www.youtube-nocookie.com/embed/myvideo",
  m9: "https://www.youtube-nocookie.com/embed/myvideo",
  m10: "https://www.youtube-nocookie.com/embed/myvideo",
  m11: "https://www.youtube-nocookie.com/embed/myvideo",
  m12: "https://www.youtube-nocookie.com/embed/myvideo",
  m13: "https://www.youtube-nocookie.com/embed/myvideo",
  m14: "https://www.youtube-nocookie.com/embed/myvideo",
  m15: "https://www.youtube-nocookie.com/embed/myvideo",
  m16: "https://www.youtube-nocookie.com/embed/myvideo",
  m17: "https://www.youtube-nocookie.com/embed/myvideo",
  m18: "https://www.youtube-nocookie.com/embed/myvideo",
  m19: "https://www.youtube-nocookie.com/embed/myvideo",
};

// 提前获取iframe元素，替换为实际的iframe ID即可
const musicVideo = document.getElementById("musicVideo");

// 批量绑定事件
Object.keys(videoLinks).forEach(key => {
  const triggerEl = document.getElementById(key);
  if (triggerEl) {
    triggerEl.addEventListener("click", () => {
      musicVideo.src = videoLinks[key];
    });
  }
});

这个方案的优势：

• 改造成本极低，保留原有的配置结构
• 后续新增视频只需要在videoLinks中新增键值对，不需要额外写事件绑定代码
• 增加了空值判断，不会因为某个ID的元素缺失导致整段JS报错

方案2：易维护版（逻辑与配置解耦） #

如果后续视频链接会频繁增减，可以直接把视频地址存在HTML标签的自定义属性上，完全不需要在JS里维护ID和地址的映射表。
首先调整链接的HTML结构，给所有视频触发链接加统一类名，地址存在data-src属性上：

<a href="javascript:;" class="video-trigger" data-src="https://www.youtube-nocookie.com/embed/xxx">视频1</a>
<a href="javascript:;" class="video-trigger" data-src="https://www.youtube-nocookie.com/embed/yyy">视频2</a>
<!-- 其余链接保持相同结构即可 -->

<iframe id="musicVideo" frameborder="0" allowfullscreen></iframe>

对应的JS代码可以简化为：

const musicVideo = document.getElementById("musicVideo");
document.querySelectorAll(".video-trigger").forEach(trigger => {
  trigger.addEventListener("click", () => {
    musicVideo.src = trigger.dataset.src;
  });
});

这个方案的优势：

• 新增/删除视频只需要修改HTML，不需要改动JS逻辑
• 没有硬编码的ID映射，代码量更少
• 不受视频数量限制，哪怕后续加几十上百个视频也不需要改JS

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