同域iframe内获取SCORM 1.2测试结果及React集成最优方案咨询

一、当前 iframe 方案下获取测试结果（同域名场景） #

同域名下父页面可直接与iframe内的SCORM内容交互，核心是利用SCORM 1.2的标准API获取状态：

1. 父页面主动轮询状态 #

在React组件中通过定时器查询iframe内的SCORM API，获取测试结果：

import { useEffect, useRef } from 'react';

function SCORMTest() {
  const iframeRef = useRef(null);

  useEffect(() => {
    const checkInterval = setInterval(() => {
      const iframeWin = iframeRef.current?.contentWindow;
      if (!iframeWin) return;

      // 查找SCORM 1.2 API对象
      const scormAPI = findSCORMAPI(iframeWin);
      if (!scormAPI) return;

      const lessonStatus = scormAPI.GetValue('cmi.core.lesson_status');
      if (['passed', 'failed', 'completed'].includes(lessonStatus)) {
        clearInterval(checkInterval);
        // 处理结果，比如解锁后续流程
        console.log('测试结果:', lessonStatus);
      }
    }, 1000);

    return () => clearInterval(checkInterval);
  }, []);

  // 标准SCORM API查找逻辑
  const findSCORMAPI = (win) => {
    let api = win.API || win.API_1484_11;
    if (!api && win.parent !== win) {
      api = findSCORMAPI(win.parent);
    }
    return api;
  };

  return (
    <iframe
      ref={iframeRef}
      src="/exam/scormcontent/index.html"
      style={{ width: '100%', height: '80vh' }}
    />
  );
}

export default SCORMTest;

2. SCORM内容主动推送结果 #

若可修改SCORM内容的代码，在测试完成后向父页面发送消息：

// SCORM内容内部（测试完成后执行）
const scormAPI = window.API || window.API_1484_11;
const result = scormAPI.GetValue('cmi.core.lesson_status');
window.parent.postMessage(
  { type: 'SCORM_TEST_RESULT', status: result },
  window.location.origin
);

父页面React组件监听消息：

import { useEffect } from 'react';

function SCORMTest() {
  useEffect(() => {
    const handleMessage = (e) => {
      if (e.origin !== window.location.origin) return;
      if (e.data.type === 'SCORM_TEST_RESULT') {
        console.log('测试结果:', e.data.status);
        // 触发后续流程
      }
    };

    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, []);

  return (
    <iframe
      src="/exam/scormcontent/index.html"
      style={{ width: '100%', height: '80vh' }}
    />
  );
}

二、替代iframe的更优方案 #

iframe存在样式隔离、路由不同步、额外性能开销等问题，对于React项目，推荐以下两种方案：

1. 使用React SCORM播放器组件 #

借助成熟的SCORM播放器组件（如react-scorm-player，需适配SCORM 1.2），这类组件封装了SCORM API交互、状态监听逻辑，更贴合React生态：

import SCORMPlayer from 'react-scorm-player';

function SCORMTest() {
  const onTestComplete = (status) => {
    console.log('测试完成:', status);
    // 开启后续流程
  };

  return (
    <SCORMPlayer
      packageUrl="/exam/scormcontent"
      version="1.2"
      onCompletion={onTestComplete}
      style={{ width: '100%', height: '80vh' }}
    />
  );
}

2. 直接集成SCORM内容到React路由 #

将SCORM内容的静态文件放在React项目的public目录下，通过react-router-dom将其作为独立路由页面挂载，同时在路由组件中实现SCORM状态监听逻辑（逻辑同iframe主动轮询方案），这种方式能更好地保持项目路由一致性。

三、关键注意事项 #

• 确保SCORM内容的imsmanifest.xml配置正确，这是SCORM内容的核心配置文件，定义了内容结构与交互规则。
• 测试完成后，SCORM内容需调用scormAPI.Commit()保存数据、scormAPI.Terminate()结束会话，避免数据丢失。
• 同域名场景下无需处理跨域，API访问与消息传递均不受限制。

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