弹窗中无法访问navigator.gpu？WebGPU渲染问题求助

问题根源 #

你遇到的问题核心是Blob URL创建的弹窗属于空源（null origin），而WebGPU API有严格的安全限制：它要求页面必须处于安全上下文，并且拥有有效的源（Origin）。空源页面不满足这两个条件，因此navigator.gpu会返回undefined；而主窗口因为是正常加载的页面（新版Chromium中即使是file://协议也被视为安全上下文），所以能正常访问WebGPU。

可行解决办法 #

1. 用本地HTTP服务器托管页面 #

这是最稳妥的方案。把你的主页面和弹窗相关文件放在本地HTTP服务器上，页面会拥有http://localhost的有效源，属于标准安全上下文，弹窗就能正常访问WebGPU。

启动本地服务器的简单方式：

# Python 3 自带的服务器
python -m http.server 8000

之后访问http://localhost:8000/你的主页面.html，无论弹窗是加载同服务器的独立页面，还是通过主窗口写入内容，都能正常调用WebGPU API。

2. 同源弹窗直接写入内容 #

放弃Blob URL，直接打开一个空的同源弹窗，通过主窗口操作弹窗的DOM写入内容。这种方式下弹窗和主窗口同源，满足WebGPU的访问要求。

修改后的代码示例：

<!DOCTYPE html>
<script>
document.addEventListener('DOMContentLoaded', async () => {
  // 打开空的同源弹窗
  const popup = window.open('', 'Test', 'directories=false,popup=true,status=false,toolbar=false,menubar=false,replace=false');
  if (!popup) return;

  // 向弹窗写入页面内容
  popup.document.write(`
    <!DOCTYPE html>
    <html>
    <body>
      I am a popup window
      <script>
        console.log(navigator.gpu); // 现在可正常获取GPU对象
      <\/script>
    </body>
    </html>
  `);
  popup.document.close();

  console.log(navigator.gpu); // 主窗口正常访问
});
</script>
<html>
</html>

3. 用iframe替代弹窗（可选） #

如果你的场景不需要独立窗口，也可以用主页面内的iframe承载渲染内容。iframe和主页面同源，同样能正常访问WebGPU API，实现起来更简单。

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