Reports

We had a similar cross-domain issue, and we tried out the Post Message HTML solution you recommended above.

Initially we were unable to connect to SCORM Cloud at all due to cross-domain. After we implemented Post Message HTML, we are able to connect and fetch learner details from SCORM Cloud. But unfortunately, the connection breaks within a few seconds and then we are unable to update the status and score in SCORM Cloud. At the moment, as soon as we open the course, SCORM Cloud automatically sets the completion and passed status within a few seconds.

Could you please guide us with this? I am sharing our index.html code below.

It's our first time working with SCORM and we'd really appreciate your help with this.

The console shows the following errors: console errors

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>LMS</title>

  <!-- Load pipwerks SCORM wrapper (assuming it's hosted) -->
 
  <script src="script.js" defer></script>

  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }

    #scorm-iframe {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
</head>
<body>

  <iframe id="scorm-iframe" frameborder="0"></iframe>

  <script>
    let Scormdata = {
      lenname: '',
      lenEmail: '',
      params: 'abc',
      learnerId: 0,
      courseId: 0,
      currentUrl: '',
    };

    const baseUrl = "https://sample.co";
    let dataGet = "";

    const allowedOrigins = [
      "https://sample.co",
      "https://sample.co"
    ];

    // ✅ Message Listener
    window.addEventListener("message", function (event) {
      if (!allowedOrigins.includes(event.origin)) return;

      console.log("📩 Message received:", event.data);

      if (event.data === "FIND_SCORM_API") {
        console.log("📩 SCORM API request received...");

        const scormIframe = document.getElementById("scorm-iframe");
        if (!scormIframe || !scormIframe.contentWindow) {
          console.error("❌ SCORM iframe not found.");
          return;
        }

        const api = pipwerks.SCORM.API;

        // Notify parent that SCORM API is found
        if (event.source && typeof event.source.postMessage === "function") {
          event.source.postMessage(
            { type: "SCORM_API_FOUND", apiAvailable: !!api },
            event.origin
          );
          console.log("✅ Sent SCORM API response to parent.", api);
        } else {
          console.warn("⚠️ Cannot send SCORM API response; event.source missing.");
        }
      }

      // SCORM init response
      if (event.data && event.data.type === "scorm-init-response") {
        console.log("✅ SCORM Init Response:", event.data.success ? "Success" : "Failed");
      }

      // SCORM API response
      if (event.data.type === "SCORM_API_RESPONSE") {
        console.log("✅ SCORM API is available:", event.data.apiAvailable);
      }

      // Handle SCORM Score Update
      if (event.data.type === "SCORM_SCORE_UPDATE") {
        try {
          const score = event.data.score;
          console.log("✅ Score received:", score);

          pipwerks.SCORM.init();
          pipwerks.SCORM.setValue("cmi.score.raw", score);
          pipwerks.SCORM.commit();
          pipwerks.SCORM.finish();

          console.log("✅ Score updated in SCORM Cloud:", score);
        } catch (error) {
          console.error("❌ Error parsing SCORM score data:", error);
        }
      }
    });

    // ✅ Initialize SCORM and send init message to iframe
    function initializeSCORM() {
      const iframe = document.getElementById("scorm-iframe");

      iframe.onload = () => {
        console.log("✅ SCORM iframe loaded. Sending SCORM init request...");
        iframe.contentWindow.postMessage({ type: "scorm-init" }, "*");
      };
    }

    // ✅ Load SCORM learner data and set iframe source
    function loadScormPackage() {
      if (pipwerks.SCORM.init()) {
        const learnerId = pipwerks.SCORM.getValue("cmi.learner_id");
        const learnerName = pipwerks.SCORM.getValue("cmi.learner_name");
        const learnerEmail = pipwerks.SCORM.getValue("cmi.learner_email"); // Optional
        const completionStatus = pipwerks.SCORM.getValue("cmi.completion_status");
        const score = pipwerks.SCORM.getValue("cmi.score.raw");
        const courseId = pipwerks.SCORM.getValue("cmi.entry");

        console.log("Learner ID:", learnerId);
        console.log("Learner Name:", learnerName);
        console.log("Email:", learnerEmail);
        console.log("Completion Status:", completionStatus);
        console.log("Score:", score);
        console.log("Course ID:", courseId);

        const currentUrl = window.location.href;

        if (learnerId && learnerName) {
          Scormdata = {
            ...Scormdata,
            learnerId,
            lenname: learnerName,
            lenEmail: learnerEmail,
            courseId,
            currentUrl
          };

          dataGet = encodeURIComponent(JSON.stringify(Scormdata));
          const fullUrl = baseUrl + dataGet;
          console.log("🌐 Iframe URL:", fullUrl);

          document.getElementById("scorm-iframe").src = fullUrl;
        }
      } else {
        console.error("❌ SCORM API initialization failed.");
      }
    }

    // ✅ On load: initialize SCORM and load data
    window.onload = () => {
      initializeSCORM();
      loadScormPackage();
    };
  </script>
</body>
</html>

79596566