fix: support cross-origin example iframes

examples/iframe/context.mjs

@@ -1 +1,2 @@
+export { win } from './runtime.mjs';
 export { data, deviceType } from './state.mjs';

examples/iframe/loader.mjs

@@ -1,6 +1,6 @@
 import files from './files.mjs';
 import MiniStats from './ministats.mjs';
-import { fetchFile, importModule, clearImports, parseConfig, fire } from './runtime.mjs';
+import { fetchFile, importModule, clearImports, parseConfig, fire, win } from './runtime.mjs';
 import { data, deviceType as selectedDeviceType, refreshContext, updateDeviceType } from './state.mjs';
 import { blockZoom } from './zoom.mjs';
 
@@ -91,7 +91,7 @@ class ExampleLoader {
             const reportedType = (isWebGPU(selectedDeviceType) && engineType === 'webgpu') ?
                 selectedDeviceType :
                 engineType;
-            window.top.activeGraphicsDevice = reportedType;
+            win.activeGraphicsDevice = reportedType;
             fire('updateActiveDevice', { deviceType: reportedType });
         }
 
@@ -166,7 +166,7 @@ class ExampleLoader {
         window.pc = await import(engineUrl);
 
         // @ts-ignore
-        window.top.pc = window.pc;
+        win.pc = window.pc;
 
         await this._fetchFiles();
 

examples/iframe/runtime.mjs

@@ -249,10 +249,26 @@ export function parseConfig(script) {
     return config;
 }
 
+/**
+ * @type {Window | null} - The same-origin top window, if available.
+ */
+const host = (() => {
+    try {
+        return window.top && window.top.location.origin === window.location.origin ? window.top : null;
+    } catch {
+        return null;
+    }
+})();
+
+/**
+ * @type {Window} - The example-facing window.
+ */
+export const win = host ?? window;
+
 /**
  * @param {string} eventName - The name of the fired event.
  * @param {object} detail - The detail object.
  */
 export function fire(eventName, detail = {}) {
-    window.top?.dispatchEvent(new CustomEvent(eventName, { detail }));
+    host?.dispatchEvent(new CustomEvent(eventName, { detail }));
 }

examples/src/examples/gaussian-splatting/lod-streaming.example.mjs

@@ -8,11 +8,11 @@ import * as pc from 'playcanvas';
 import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
 import { GsplatRevealRadial } from 'playcanvas/scripts/esm/gsplat/reveal-radial.mjs';
 
-import { data, deviceType } from 'examples/context';
+import { data, deviceType, win } from 'examples/context';
 
 // allow overriding scene url and orientation via hash query params, e.g.
 // #/gaussian-splatting/lod-streaming?url=https://example.com/scene/lod-meta.json&orientation=90
-const hashQuery = (window.top?.location.hash || window.location.hash || '').split('?')[1] || '';
+const hashQuery = (win.location.hash || window.location.hash || '').split('?')[1] || '';
 const hashParams = new URLSearchParams(hashQuery);
 const paramUrl = hashParams.get('url');
 const paramOrientation = hashParams.get('orientation');

examples/src/examples/graphics/light-physical-units.example.mjs

@@ -1,6 +1,6 @@
 import * as pc from 'playcanvas';
 
-import { data, deviceType } from 'examples/context';
+import { data, deviceType, win } from 'examples/context';
 
 const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
 window.focus();
@@ -295,7 +295,7 @@ assetListLoader.load(() => {
 
         // resize control panel to fit the content better
         if (resizeControlPanel) {
-            const panel = window.top.document.getElementById('controlPanel');
+            const panel = win.document.getElementById('controlPanel');
             if (panel) {
                 panel.style.width = '360px';
                 resizeControlPanel = false;

examples/src/examples/test/contact-hardening-shadows.example.mjs

@@ -4,7 +4,7 @@
 
 import * as pc from 'playcanvas';
 
-import { data, deviceType } from 'examples/context';
+import { data, deviceType, win } from 'examples/context';
 
 const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
 window.focus();
@@ -297,9 +297,9 @@ assetListLoader.load(() => {
         }
     });
 
-    const areaLightElement = window.top.document.getElementById('area-light');
-    const pointLightElement = window.top.document.getElementById('point-light');
-    const directionalLightElement = window.top.document.getElementById('directional-light');
+    const areaLightElement = win.document.getElementById('area-light');
+    const pointLightElement = win.document.getElementById('point-light');
+    const directionalLightElement = win.document.getElementById('directional-light');
 
     let resizeControlPanel = true;
     let time = 0;
@@ -350,7 +350,7 @@ assetListLoader.load(() => {
 
         // resize control panel to fit the content better
         if (resizeControlPanel) {
-            const panel = window.top.document.getElementById('controlPanel');
+            const panel = win.document.getElementById('controlPanel');
             if (panel) {
                 panel.style.width = '360px';
                 resizeControlPanel = false;