fullscreen/api/resources/recursive-iframe-fullscreen.html

<!DOCTYPE html>
<meta charset="utf-8" />
<title>Recursive IFrame Fullscreen API success reporter</title>
<body>
  <script src="/resources/testdriver.js"></script>
  <script src="/resources/testdriver-vendor.js"></script>
  <script src="../../trusted-click.js"></script>
  <script>
    let child_frame = null;
    const events = [];

    document.onfullscreenchange = () => {
      events.push("fullscreenchange");
    };

    document.onfullscreenerror  = () => {
      events.push("fullscreenerror");
    };

    function send_report() {
      window.top.postMessage(
        {
          name: window.name,
          action: "report",
          report: {
            api: "fullscreen",
            frame: window.name,
            fullscreenElementIsNull: document.fullscreenElement === null,
            events,
          },
        },
        "*"
      );
    }

    async function create_child_frame({ src, name, allow_fullscreen }) {
      child_frame = document.createElement("iframe");
      child_frame.allow = allow_fullscreen ? "fullscreen" : "";
      child_frame.name = name;
      child_frame.style.width = "100%";
      child_frame.style.height = "100%";
      document.body.appendChild(child_frame);
      await new Promise((resolve) => {
        child_frame.addEventListener("load", resolve, { once: true });
        child_frame.src = src;
      });
      window.top.postMessage({ action: "load", name }, "*");
    }

    async function go_fullscreen() {
      await trusted_click(document.body);
      let error;
      try {
        await document.body.requestFullscreen();
      } catch (err) {
        error = err.name;
      } finally {
        window.top.postMessage(
          { action: "requestFullscreen", name: window.name, error },
          "*"
        );
      }
    }

    window.addEventListener("message", async (e) => {
      // Massage is not for us, try to pass it on...
      if (e.data.name !== window.name) {
        child_frame?.contentWindow.postMessage(e.data, "*");
        return;
      }
      switch (e.data.action) {
        case "requestReport":
          send_report();
          break;
        case "requestFullscreen":
          await go_fullscreen();
          break;
        case "addIframe":
          await create_child_frame(e.data.iframe);
          break;
        default:
          window.top.postMessage(e.data, "*");
      }
    });
  </script>
</body>