React中如何获取iframe内SCORM包的进度数据

要实现对iframe内Articulate生成的SCORM 1.2/2004包的进度跟踪，核心是通过SCORM API实现父页面与iframe的通信，以下是各需求的具体实现方法：

前提准备 #

确保父页面与SCORM包部署在同一域名下，避免跨域权限问题；先实现通用的SCORM API获取函数：

function getSCORMAPI() {
  const iframe = document.getElementById('your-scorm-iframe-id'); // 替换为你的iframe ID
  if (!iframe) return null;
  const iframeWindow = iframe.contentWindow || iframe.contentDocument.defaultView;
  
  // 查找SCORM API对象（兼容不同实现）
  let api = iframeWindow.API || iframeWindow.api;
  if (!api) {
    let win = iframeWindow;
    let attempts = 0;
    while (!win.API && win.parent && win.parent !== win && attempts < 5) {
      win = win.parent;
      attempts++;
    }
    api = win.API;
  }
  return api;
}

1. 获取幻灯片总数 #

Articulate会将幻灯片总数存储在标准SCORM字段或自定义字段中，优先尝试标准字段，再 fallback 到Articulate自定义字段：

function getSlideTotal() {
  const scormAPI = getSCORMAPI();
  if (!scormAPI) return 0;
  
  // SCORM 1.2/2004标准字段
  let total = scormAPI.LMSGetValue('cmi.core.lesson_total');
  // 若标准字段为空，尝试Articulate自定义字段
  if (!total || total === '') {
    total = scormAPI.LMSGetValue('articulate.slides.total');
  }
  return parseInt(total) || 0;
}

2. 跟踪当前幻灯片序号（上/下页切换时） #

通过定时检查SCORM变量的变化来捕捉幻灯片切换事件，也可结合postMessage（若有权限修改SCORM包）：

let currentSlide = 0;
// 定时检查变量，间隔可根据需求调整
setInterval(() => {
  const scormAPI = getSCORMAPI();
  if (!scormAPI) return;
  
  let newSlide = scormAPI.LMSGetValue('cmi.core.lesson_location');
  if (!newSlide) {
    newSlide = scormAPI.LMSGetValue('articulate.slides.current');
  }
  newSlide = parseInt(newSlide) || 0;
  
  if (newSlide !== currentSlide) {
    currentSlide = newSlide;
    // 此处添加你的业务逻辑，比如更新页面显示
    console.log('当前幻灯片：', currentSlide);
  }
}, 1000);

3. 获取完成状态 #

通过标准SCORM字段获取完成状态，兼容1.2和2004版本：

function getCompletionStatus() {
  const scormAPI = getSCORMAPI();
  if (!scormAPI) return 'unknown';
  
  const version = scormAPI.LMSGetValue('cmi._version') || '1.2';
  // SCORM 1.2用cmi.core.lesson_status，2004用cmi.completion_status
  const statusField = version === '2004' ? 'cmi.completion_status' : 'cmi.core.lesson_status';
  return scormAPI.LMSGetValue(statusField);
}

返回值通常为completed、incomplete、passed、failed等。

4. 获取测验得分 #

通过标准SCORM得分字段获取测验数据，同时兼容Articulate自定义字段：

function getQuizScore() {
  const scormAPI = getSCORMAPI();
  if (!scormAPI) {
    return { raw: 0, max: 100, min: 0, percentage: 0 };
  }
  
  // 标准SCORM得分字段
  const rawScore = scormAPI.LMSGetValue('cmi.core.score.raw');
  const maxScore = scormAPI.LMSGetValue('cmi.core.score.max');
  const minScore = scormAPI.LMSGetValue('cmi.core.score.min');
  
  // 若标准字段为空，尝试Articulate自定义字段
  let finalRaw = parseInt(rawScore) || 0;
  let finalMax = parseInt(maxScore) || 100;
  if (!finalRaw) {
    finalRaw = parseInt(scormAPI.LMSGetValue('articulate.quiz.score')) || 0;
  }
  
  return {
    raw: finalRaw,
    max: finalMax,
    min: parseInt(minScore) || 0,
    percentage: finalMax ? (finalRaw / finalMax) * 100 : 0
  };
}

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