嵌入同域Godot游戏的iframe阻塞页面交互，如何解决？

方案1：延迟初始化游戏加载逻辑 #

直接让iframe先加载一个轻量占位页，等用户填完问卷再触发游戏资源加载，完全避开加载时的主线程冲突：

1. 给iframe设置一个静态占位页作为初始src，页面里只放接收父页面消息的脚本，不加载任何Godot资源。
2. 用户提交问卷后，父页面通过postMessage通知iframe，iframe再动态插入Godot的JS文件并启动游戏。

父页面代码示例：

document.querySelector('#submit-survey').addEventListener('click', () => {
  const gameFrame = document.getElementById('game-iframe');
  gameFrame.contentWindow.postMessage('init-game', window.location.origin);
});

iframe占位页代码示例：

window.addEventListener('message', (e) => {
  if (e.origin !== window.location.origin) return;
  if (e.data === 'init-game') {
    const godotScript = document.createElement('script');
    godotScript.src = 'your-godot-export.js';
    godotScript.onload = () => {
      // 调用Godot启动函数，导出的JS里通常是Engine.runMainLoop()
      Engine?.runMainLoop();
    };
    document.body.appendChild(godotScript);
    // 若有其他资源（如Wasm），按导出的游戏页面逻辑动态加载即可
  }
});

方案2：分阶段预加载资源（利用浏览器空闲时间） #

如果想提前悄悄加载资源，又不阻塞主线程，可以用requestIdleCallback分批请求游戏资源，存在缓存里，等用户完成问卷再直接启动游戏：

1. 先整理好游戏需要加载的资源列表（Wasm文件、纹理、音频等）。
2. 页面加载完成后，利用浏览器的空闲时间逐个加载资源，存入Cache API。
3. 用户提交问卷后，再让iframe加载完整游戏页面，此时资源直接从缓存读取，瞬间启动。

核心代码示例：

const resourceList = ['game.wasm', 'res://assets/tex1.png', 'res://assets/bgm.mp3'];
let loadedNum = 0;

function loadNext() {
  if (loadedNum >= resourceList.length) return;
  requestIdleCallback(() => {
    const url = resourceList[loadedNum];
    fetch(url)
      .then(res => caches.open('game-cache').then(cache => cache.put(url, res)))
      .then(() => {
        loadedNum++;
        loadNext();
      });
  });
}

// 页面加载后开始分批预加载
window.addEventListener('load', loadNext);

// 问卷提交后启动游戏
document.querySelector('#submit-survey').addEventListener('click', () => {
  document.getElementById('game-iframe').src = 'full-game.html';
});

方案3：开启Godot的Wasm流式编译（最简单） #

Godot 3.2及以上版本导出Web版时，有个Streaming选项（导出设置→Web→Wasm），开启后浏览器会在下载Wasm文件的同时进行编译，大幅减少主线程阻塞时间。开启这个选项后，即使提前加载iframe，父页面的按钮、输入框也能正常交互，不需要额外代码修改。

注意事项 #

• 跨iframe通信一定要验证origin，防止安全漏洞。
• 用缓存API时，要注意资源更新，避免用户一直加载旧版本游戏资源。

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