纯JS获取iframe弹窗中多个视频总时长的问题求助

你的问题核心在于视频元数据加载是异步过程：同步读取duration会遇到元数据未就绪的情况，直接绑定onloadedmetadata又因为回调执行晚于函数返回，导致拿到初始值0。下面给你一套稳定的解决方案：

核心思路 #

把每个视频的时长获取包装成Promise，等待所有视频的元数据加载完成后再统一求和，彻底解决异步时序问题。

重构后的代码 #

1. 异步获取所有视频总时长 #

const getTotalVideosDuration = (videoNodeList) => {
  // 将NodeList转为数组，方便遍历处理
  const durationPromises = Array.from(videoNodeList).map(videoNode => {
    return new Promise((resolve) => {
      // 优先检查元数据是否已加载（readyState >=2 表示已获取元数据）
      if (videoNode.readyState >= 2) {
        resolve(videoNode.duration * 1000);
        return;
      }

      // 元数据未加载时，监听加载完成事件
      videoNode.onloadedmetadata = () => {
        resolve(videoNode.duration * 1000);
      };

      // 处理视频加载失败的情况，避免Promise挂起
      videoNode.onerror = () => {
        resolve(0); // 失败视频时长按0计算，可根据需求调整
      };
    });
  });

  // 等待所有视频的时长Promise完成后求和
  return Promise.all(durationPromises).then(durations => {
    return durations.reduce((total, current) => total + current, 0);
  });
};

2. 封装调用逻辑（异步函数） #

const calculateVideo = async (videoNodeList) => {
  const totalDuration = await getTotalVideosDuration(videoNodeList);
  // 兜底处理：如果总时长无效则返回0
  return isNaN(totalDuration) || totalDuration === 0 ? 0 : totalDuration;
};

调用方式 #

因为calculateVideo是异步函数，调用时需要用await或者.then()：

// 示例：获取iframe内的所有video节点
const iframeVideos = document.querySelector('iframe').contentDocument.querySelectorAll('video');

// 方式1：用await（需在async函数内调用）
async function getTotal() {
  const total = await calculateVideo(iframeVideos);
  console.log('视频总时长（毫秒）：', total);
}

// 方式2：用.then()
calculateVideo(iframeVideos).then(total => {
  console.log('视频总时长（毫秒）：', total);
}).catch(err => {
  console.error('获取时长出错：', err);
});

关键细节说明 #

• readyState判断：避免重复等待已加载好的视频，提升性能。
• 错误处理：防止单个视频加载失败导致整个流程阻塞，可根据业务需求修改失败后的处理逻辑（比如抛出错误）。
• 跨域注意：如果iframe的页面和主页面域名不同，会存在跨域限制，无法直接访问iframe内的video节点。这种情况下需要在iframe页面通过postMessage主动发送时长数据，主页面监听消息接收。

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