如何向父级LMS实时通知内嵌iFrame的xApi内容完成状态？

1. 让xApi AU主动通过postMessage通知父页面 #

xApi AU本身在用户满足完成条件（比如看完完整视频、通过考核、浏览完所有必学模块）时，会生成completed状态的xApi语句。可以直接在AU的代码里，等确认完成逻辑触发且完成语句成功发送到LRS后，主动给父页面发信号。

• 具体实现：
  • AU内部代码（触发完成后执行）：

    window.parent.postMessage({
      type: 'au-completed',
      activityId: '<当前AU的activityId>',
      registrationId: '<用户的注册ID>'
    }, '<父页面的域名>'); // 限定域名避免安全风险
    

  • 父页面添加消息监听：

    window.addEventListener('message', (event) => {
      // 先验证消息来源域名，确保安全
      if (event.origin !== '<AU的域名>') return;
      if (event.data.type === 'au-completed') {
        // 先调用LMS接口标记内容完成
        fetch('/api/mark-learning-completed', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            activityId: event.data.activityId,
            registrationId: event.data.registrationId
          })
        }).then(() => {
          // 跳转至列表页
          window.location.href = '/learning-list';
        });
      }
    });
    

  • 优势：实时性拉满，不用轮询LRS，只有AU内部确认用户真的完成了才会发通知，从根源避免用户提前点击标记的问题。

2. 用LRS的Webhook推送完成事件 #

如果没法修改AU的代码，可以配置LRS的Webhook功能：当LRS收到该AU的completed类型xApi语句时，主动调用LMS的接口，告知用户完成了内容。

• 具体实现：
  • 在LRS后台配置Webhook，触发条件设为：收到verb.id等于http://adlnet.gov/expapi/verbs/completed、且object.id为目标AU的activityId的语句。
  • 把Webhook的回调地址指向LMS的接口，比如/api/lrs-completion-notify。
  • LMS的接口收到回调后，更新用户的学习状态；如果父页面还开着，可以通过WebSocket实时通知父页面跳转，或者等用户回到列表页时直接读取更新后的状态。
  • 优势：不用动AU的代码，完全基于LRS收到的真实完成语句判断，杜绝作弊可能。

3. 调用AU暴露的进度查询API（如果有） #

有些xApi AU会对外提供进度查询的方法，父页面可以通过iframe的contentWindow调用这个API，按需查询进度（比如用户切回页面时查一次，或者每隔几分钟查一次，不是轮询LRS），等进度达标就触发后续逻辑。

• 具体实现：
  • 先确认AU提供类似window.getCompletionStatus()的进度查询方法。
  • 父页面代码：

    function checkAUStatus() {
      const auIframe = document.getElementById('au-display-iframe');
      if (auIframe && auIframe.contentWindow) {
        try {
          const isCompleted = auIframe.contentWindow.getCompletionStatus();
          if (isCompleted) {
            // 执行标记完成和跳转逻辑
            window.location.href = '/learning-list';
          }
        } catch (e) {
          // 处理跨域问题，要是有跨域得让AU配置CORS或者改用postMessage
        }
      }
    }
    // 监听页面可见性，用户切回页面时查询
    document.addEventListener('visibilitychange', () => {
      if (!document.hidden) {
        checkAUStatus();
      }
    });
    

  • 优势：比轮询LRS高效得多，而且只有AU确认完成才会触发，避免提前标记。

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