React+TS集成SCORM时通过Iframe加载无法找到API问题求助

问题核心 #

你遇到的SCORM.API.find: Error finding API错误，本质是当前React组件所在的父页面没有SCORM API环境——SCORM API是由LMS（学习管理系统）提供的，或者嵌入的SCORM包本身的API存在于iframe内部的窗口上下文，而你的代码是在父页面调用scorm.initialize()，自然找不到API。

具体解决步骤 #

1. 切换SCORM API的查找上下文到iframe #

@gamestdio/scorm默认在当前窗口（父页面）查找API，你需要手动指定到iframe的窗口上下文，并且必须等iframe完全加载完成后再初始化：

修改你的useEffect代码：

useEffect(() => {
  const iframe = document.getElementById('scormIframe') as HTMLIFrameElement;
  let isUnmounted = false;

  const handleIframeLoad = async () => {
    // 等待iframe内部SCORM包初始化API（可根据实际情况调整延迟时间）
    await new Promise(resolve => setTimeout(resolve, 1000));

    if (isUnmounted) return;

    // 指定SCORM API查找的窗口为iframe的内容窗口
    scorm.init({ window: iframe.contentWindow });

    if (scorm.initialize()) {
      const rawScore = scorm.get("cmi.score.raw");
      setScore(rawScore !== null ? parseInt(rawScore, 10) : null);
      const status = scorm.get("cmi.completion_status");
      setCompletionStatus(status);
    } else {
      console.error("SCORM API initialization failed");
    }
  };

  iframe.addEventListener('load', handleIframeLoad);

  return () => {
    isUnmounted = true;
    iframe.removeEventListener('load', handleIframeLoad);
    scorm.terminate();
  };
}, []);

2. 让iframe主动向父页面传递SCORM数据 #

如果上述方法无效，可修改iframe内部的SCORM代码，让它主动把数据发送到父页面：

在iframe的SCORM初始化完成后，添加如下代码：

// iframe内部的SCORM脚本中
if (typeof API !== 'undefined') {
  const score = API.LMSGetValue("cmi.score.raw");
  const status = API.LMSGetValue("cmi.completion_status");
  window.parent.postMessage({ type: 'SCORM_DATA', score, status }, '*');
}

然后在React父组件中监听消息：

useEffect(() => {
  const handleMessage = (e: MessageEvent) => {
    if (e.data.type === 'SCORM_DATA') {
      setScore(e.data.score ? parseInt(e.data.score, 10) : null);
      setCompletionStatus(e.data.status);
    }
  };
  window.addEventListener('message', handleMessage);
  return () => window.removeEventListener('message', handleMessage);
}, []);

3. 本地测试必须用HTTP服务器 #

本地开发时禁止用file://协议打开页面——浏览器的安全限制会阻止跨窗口的API访问。使用本地HTTP服务器（比如npx http-server）运行你的React项目和SCORM包，确保两者在同一域名下。

4. 验证SCORM包的完整性 #

检查你的SCORM包是否符合标准：

• 包含imsmanifest.xml配置文件
• 内部的SCORM API脚本（如SCORM_API_wrapper.js）已正确加载
• 包符合SCORM 1.2或2004的规范要求

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