如何跟踪AWS S3中嵌入iframe的SCORM 2004内容的用户进度？

要在自有网站中跟踪iframe嵌入的SCORM 2004内容进度，核心是实现SCORM规范的API通信，将学习数据同步到你的后端系统。以下是具体步骤：

1. 解决跨域问题 #

你的SCORM包存储在AWS S3，与自有网站域名不同，iframe跨域会导致SCORM API无法直接通信，需先处理：

方式一：配置S3 CORS规则 #

在S3存储桶的权限设置中添加CORS规则，允许自有网站域名的跨域脚本交互：

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>https://你的自有网站域名</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>Content-Length</ExposeHeader>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
  </CORSRule>
</CORSConfiguration>

方式二：同域名部署SCORM包 #

如果条件允许，将SCORM包部署到和自有网站同域名的服务器（比如子域名），彻底避免跨域问题，后续API实现会更简单。

2. 在父页面实现SCORM 2004 API Provider #

SCORM内容会自动查找全局的SCORM API对象，你需要在自有网站的父页面（嵌入iframe的页面）实现符合SCORM 2004规范的API，用来接收和返回学习数据。

核心API方法说明 #

你需要实现以下关键方法，重点在SetValue中捕获进度数据，GetValue中返回已存储的进度：

• Initialize()：初始化SCORM会话，关联当前用户
• SetValue(key, value)：接收SCORM包发送的进度数据（比如幻灯片完成状态、整体进度）
• GetValue(key)：返回之前存储的用户进度，用于续学
• Commit()：触发数据持久化到自有后端
• Terminate()：结束SCORM会话

代码示例（非跨域场景） #

// 父页面全局对象，供iframe内的SCORM调用
window.API_1484_11 = {
  // 存储当前用户的进度数据
  userProgress: {},
  // 初始化会话，传入用户ID等标识
  Initialize: function() {
    this.userProgress.userId = "当前登录用户ID"; // 替换为你的用户标识
    return "true";
  },
  // 接收SCORM发送的数据
  SetValue: function(key, value) {
    // 捕获关键进度数据
    switch(key) {
      // 整体完成状态：completed/incomplete/not attempted
      case "cmi.completion_status":
        this.userProgress.completionStatus = value;
        break;
      // 整体进度值：0-1的小数（比如0.5表示50%）
      case "cmi.progress_measure":
        this.userProgress.progress = parseFloat(value);
        break;
      // 幻灯片/目标完成状态（n为目标索引，需根据SCORM包实际设置调整）
      case "cmi.objectives.0.completion_status":
        this.userProgress.slide1Status = value;
        break;
      // 其他自定义跟踪字段，根据SCORM包的设置添加
      default:
        this.userProgress[key] = value;
    }
    return "true";
  },
  // 返回存储的进度数据
  GetValue: function(key) {
    return this.userProgress[key] || "";
  },
  // 提交数据到自有后端
  Commit: function() {
    // 发送进度数据到你的后端接口
    fetch("/api/save-scorm-progress", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(this.userProgress)
    });
    return "true";
  },
  // 结束会话
  Terminate: function() {
    this.Commit(); // 结束前提交最后一次数据
    return "true";
  },
  // 其他必填方法（SCORM规范要求）
  GetLastError: function() { return "0"; },
  GetErrorString: function() { return ""; },
  GetDiagnostic: function() { return ""; }
};

跨域场景适配（postMessage通信） #

如果必须跨域，需要用postMessage实现API的跨域调用：

• 在iframe内的SCORM脚本中，将API调用改为向父页面发送message请求
• 在父页面监听message事件，处理请求并返回结果

示例（父页面监听）：

window.addEventListener("message", function(event) {
  // 验证来源，防止恶意请求
  if (event.origin !== "https://scorm-package.s3.eu-west-2.amazonaws.com") return;

  const { method, params } = event.data;
  let result;

  // 处理SCORM API方法调用
  switch(method) {
    case "Initialize":
      result = "true";
      // 初始化用户进度
      window.userProgress = { userId: "当前用户ID" };
      break;
    case "SetValue":
      const [key, value] = params;
      window.userProgress[key] = value;
      result = "true";
      break;
    case "Commit":
      // 提交到后端
      fetch("/api/save-scorm-progress", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(window.userProgress)
      });
      result = "true";
      break;
    // 其他方法同理
  }

  // 返回结果给iframe
  event.source.postMessage({ result }, event.origin);
});

3. 调整SCORM包的API查找逻辑 #

大部分SCORM包自带API查找脚本，默认只在当前窗口查找。你需要修改SCORM包中的scormapi.js（或类似命名的脚本），让它往父窗口查找API：

找到脚本中的API查找部分，将window替换为window.parent，比如：

// 修改前
function findAPI(win) {
  while (win.API_1484_11 == null && win.parent != null && win.parent != win) {
    win = win.parent;
  }
  return win.API_1484_11;
}

// 确保调用时从父窗口开始查找
const scormAPI = findAPI(window.parent);

如果你的SCORM包是用工具生成的（比如Articulate Storyline），可以在发布时选择“跟踪到外部LMS”，工具会自动适配外部API的查找逻辑。

4. 自有后端的进度存储与查询 #

• 后端需要提供接口接收父页面发送的进度数据，存储到数据库（比如记录用户ID、SCORM课程ID、幻灯片完成状态、整体进度值、更新时间等）
• 当用户再次打开课程时，父页面的GetValue方法从后端查询该用户的历史进度，返回给SCORM包，实现续学功能

注意事项 #

• 不同SCORM包的跟踪字段可能不同，需要查看SCORM包的imsmanifest.xml文件，确认目标（objectives）和交互（interactions）的定义，对应捕获正确的key
• SCORM 2004的规范细节较多，需确保API方法的返回值符合规范（比如成功返回"true"，失败返回"false"）
• 测试时可以在SetValue中添加console.log，查看SCORM包实际发送的所有key和value，确保没有遗漏关键数据

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