如何在移动端阻止页面中多个Vimeo视频iframe加载？

嘿，这个需求很实用！你现在的脚本只能处理单个ID的iframe，要批量控制所有iframe其实很简单，只需要用document.querySelectorAll()来获取页面上所有的iframe元素，然后遍历处理就行。我给你一步步拆解：

第一步：准备你的iframe标签 #

首先确保所有需要控制的iframe都把原来的src属性换成data-src，这样页面默认加载时不会请求视频资源，避免移动端不必要的加载消耗：

<!-- 原来的iframe（会默认加载） -->
<iframe src="https://vimeo.com/your-video-id" frameborder="0"></iframe>

<!-- 修改后的iframe（默认不加载） -->
<iframe data-src="https://vimeo.com/your-video-id" frameborder="0"></iframe>

第二步：修改脚本批量处理所有iframe #

把你原来的单个处理逻辑改成遍历所有iframe的版本，同时加上DOM加载完成的监听，避免脚本执行时iframe还没渲染到页面上：

document.addEventListener('DOMContentLoaded', function() {
  // 获取页面中所有的iframe元素
  const allIframes = document.querySelectorAll('iframe');
  
  // 判断当前设备是否为桌面端（宽度≥720px）
  if (window.matchMedia("(min-width: 720px)").matches) {
    // 遍历每个iframe，触发视频加载
    allIframes.forEach(iframe => {
      const videoSrc = iframe.getAttribute('data-src');
      // 确保data-src存在再赋值，避免控制台报错
      if (videoSrc) {
        iframe.src = videoSrc;
      }
    });
  }
});

可选优化：响应窗口大小变化 #

如果需要支持用户在桌面端调整窗口到移动端尺寸时，自动停止视频加载（或者清空iframe的src），可以把逻辑封装成函数，再监听窗口resize事件：

function handleIframeLoading() {
  const allIframes = document.querySelectorAll('iframe');
  const isDesktop = window.matchMedia("(min-width: 720px)").matches;

  allIframes.forEach(iframe => {
    const videoSrc = iframe.getAttribute('data-src');
    if (isDesktop) {
      // 桌面端：仅当iframe还没加载时，才赋值src
      if (videoSrc && !iframe.src) {
        iframe.src = videoSrc;
      }
    } else {
      // 移动端：如果已经加载了视频，清空src停止加载
      if (iframe.src) {
        iframe.src = '';
      }
    }
  });
}

// 页面加载完成后执行一次
document.addEventListener('DOMContentLoaded', handleIframeLoading);
// 窗口大小变化时重新执行逻辑
window.addEventListener('resize', handleIframeLoading);

这样就能完美实现你的需求：移动端不加载Vimeo iframe，大幅减少页面加载时间，桌面端则正常加载视频。

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