如何通过控制台设置Scorm player进度条完成以跳转下一张幻灯片

你贴出的DOM里style="width: 100%"只是前端渲染的视觉效果，真正控制幻灯片解锁的是三个层面的状态：进度条元素绑定的ARIA状态值、播放器全局监听的幻灯片完成事件、SCORM标准API上报的课程进度数据，仅修改CSS宽度无法触发解锁，按以下步骤操作即可。

操作步骤 #

• 打开课程页面按F12调出开发者工具，切换到Console标签
• 优先执行下面的代码，清空页面所有强制等待的定时器，跳过最小停留时长校验：

  // 清除所有计时类任务，跳过强制等待逻辑
  for (let timerId = 1; timerId < 100000; timerId++) {
    clearTimeout(timerId);
    clearInterval(timerId);
  }
  

• 再执行进度完成代码，同步修改所有状态并触发解锁：

  // 定位进度条元素
  const progressBar = document.querySelector('[data-ref="progressBar"]');
  if (!progressBar) throw new Error('未找到进度条元素，请确认在课程幻灯片页面执行');
  
  // 同步修改所有进度相关属性为完成状态
  const maxProgress = parseFloat(progressBar.getAttribute('aria-valuemax'));
  progressBar.setAttribute('aria-valuenow', maxProgress);
  progressBar.setAttribute('aria-valuetext', '100%');
  progressBar.style.width = '100%';
  
  // 主动触发播放器监听的所有进度更新事件，绕过前端校验
  const triggerEvents = ['change', 'input', 'progress', 'slidecomplete', 'update'];
  triggerEvents.forEach(evt => {
    progressBar.dispatchEvent(new Event(evt, { bubbles: true, cancelable: true }));
  });
  
  // 调用SCORM原生API上报当前页完成状态，同步到课程后台
  const scormAPI = window.API_1484_1_1 || window.API;
  if (scormAPI) {
    scormAPI.SetValue('cmi.progress_measure', '1');
    scormAPI.SetValue('cmi.completion_status', 'completed');
    scormAPI.Commit('');
  }
  
  // 自动触发下一页按钮跳转
  const nextButton = document.querySelector('[data-ref="nextButton"], .nav-next, .next-slide');
  if (nextButton && !nextButton.disabled) nextButton.click();
  

异常处理 #

• 如果执行后下一页按钮仍处于禁用状态，在控制台执行sessionStorage.clear()、localStorage.clear()后刷新页面，重新进入对应幻灯片再执行上述代码即可，部分播放器会把临时进度存在本地缓存做二次校验。
• 提示：该方法仅适用于你已经读完当前幻灯片内容、需要跳过无意义等待的场景，请遵守课程相关考核要求，不要用于恶意刷课。

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