如何用react-scorm-provider在React中集成SCORM包及解决API连接问题

问题概述 #

尝试使用react-scorm-provider库将SCORM包集成到React应用中，目标是在iframe内展示SCORM包并获取学员姓名、学习状态、跟踪信息等SCORM数据，但目前无法与SCORM API建立连接。

当前代码结构 #

父组件（App.js） #

import React from "react";
import "./styles.css";
import ScormProvider from "react-scorm-provider";
import Scorm from "components/Scorm";

export default function App() {
  return (
    <ScormProvider version="1.2" debug={true}>
      <div className="App">
        <h1>Quiz</h1>
        <hr />
        <Scorm />
      </div>
    </ScormProvider>
  );
}

子组件（Scorm.jsx） #

import React from "react";
import { withScorm } from "react-scorm-provider";

const Scorm = (props) => {
    return (
      <div>
        <iframe
          src="https://louuu03.github.io/Scorm_Example/story.html"
          height="600px"
          width="900px"
          title="Scorm Package URL"
        />
        <br />
        <button onClick={() => { console.log(props); }}>
          Click Me
        </button>
      </div>
    );
}

export default withScorm()(Scorm);

控制台报错 #

问题原因与解决办法 #

1. 跨域限制导致API无法访问 #

你加载的SCORM包来自外部域名，浏览器同源策略会阻止React应用与iframe内的SCORM包进行API通信。SCORM API需要同源环境才能正常交互，或通过postMessage配合适配器实现跨域数据传递。

解决方式：

• 将SCORM包部署到与React应用相同的域名下，消除跨域限制；
• 若必须跨域，需修改SCORM包代码添加postMessage通信逻辑，同时在React应用中监听消息并转发到react-scorm-provider的API接口。

2. react-scorm-provider无法自动跨iframe查找API #

该库默认在当前窗口或父窗口查找SCORM API，但iframe内的SCORM包会将API挂载到自身window对象，库无法自动跨iframe获取。需手动获取并注入API：

修改后的子组件代码：

import React, { useEffect, useRef } from "react";
import { withScorm } from "react-scorm-provider";

const Scorm = (props) => {
    const iframeRef = useRef(null);

    useEffect(() => {
        const iframe = iframeRef.current;
        if (iframe) {
            iframe.onload = () => {
                // 获取iframe内的SCORM API
                const scormApi = iframe.contentWindow.API || iframe.contentWindow.GetAPI?.();
                if (scormApi) {
                    // 将API注入到react-scorm-provider上下文
                    props.scorm.setApi(scormApi);
                }
            };
        }
    }, [props.scorm]);

    return (
      <div>
        <iframe
          ref={iframeRef}
          src="https://louuu03.github.io/Scorm_Example/story.html"
          height="600px"
          width="900px"
          title="Scorm Package URL"
          allow="same-origin"
        />
        <br />
        <button onClick={() => {
            // 尝试获取SCORM数据
            props.scorm.getLearnerName().then(name => console.log("学员姓名:", name));
            props.scorm.getCompletionStatus().then(status => console.log("学习状态:", status));
        }}>
          获取SCORM数据
        </button>
      </div>
    );
}

export default withScorm()(Scorm);

3. SCORM包未正确暴露API #

部分SCORM包仅在LMS环境下初始化API，未在普通浏览器环境暴露。需检查SCORM包内的story.html，确保API已挂载到window对象。

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