PlayCanvas嵌入Storyline iFrame后无法调用getPlayer()问题咨询

问题排查及解决方案 #

1. 优先排查执行时机问题 #

PlayCanvas 脚本默认在自身页面资源加载完成后立即执行，但此时父层 Storyline 的getPlayer方法可能还没完成初始化，你要获取的父层 DOM 元素也可能还没渲染完成，这是最常见的触发原因。
可以通过轮询检测的方式兼容加载时序差：

// PlayCanvas 内部脚本添加以下逻辑
let retryTimes = 0;
const maxRetry = 30; // 最多重试30次，每次间隔100ms，总等待3秒可自行调整
const getPlayerTimer = setInterval(() => {
  // 优先判断父层方法是否存在，避免报错
  if (window.parent && typeof window.parent.getPlayer === 'function') {
    const player = window.parent.getPlayer();
    clearInterval(getPlayerTimer);
    // 拿到player后再执行变量赋值等操作
    // player.SetVar("Result", yourScoreVar);
  } else if (retryTimes >= maxRetry) {
    clearInterval(getPlayerTimer);
    console.error('获取Storyline Player对象超时');
  }
  retryTimes++;
}, 100);

2. 修正DOM获取语法 #

你使用的parent.document.getElementById('')传入了空ID参数，肯定无法返回任何元素。如果需要获取父层DOM元素，必须传入对应元素的正确ID值；如果是要验证同域访问权限，可以执行以下测试代码：

// 能正常打印父层页面标题则说明同域权限正常
console.log('父层页面标题：', window.parent.document.title);

如果上述代码报跨域错误，需要确认PlayCanvas资源和Storyline幻灯片的部署域名、端口、协议三者完全一致，任意一项不同都会触发跨域限制，无法访问父层对象。

3. 规避PlayCanvas作用域隔离 #

部分版本的PlayCanvas会将脚本封装在独立作用域内，直接写parent可能被作用域内的同名变量覆盖，统一使用window.parent调用父层对象即可避免该问题。
调试时可以打开浏览器开发者工具，切换到当前iFrame的执行上下文，直接输入window.parent.getPlayer()执行，如果控制台能正常返回player对象，就可以确定是脚本执行时机问题，按第一个方案调整即可。

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