navigator.getGamepads不是函数错误求助（Windows10+Firefox环境）

核心原因 #

Firefox的Gamepad API仅允许在安全上下文中运行，也就是只能通过HTTPS协议或者localhost（本地开发服务器）访问页面。如果直接打开本地HTML文件（file://协议），或者在普通HTTP网站上运行，浏览器会禁用该API，导致出现这个错误。

具体解决方案 #

1. 切换到安全上下文运行代码 #

• 本地开发时，不要直接双击打开HTML文件，而是用本地服务器启动项目：
  • Node.js环境：先安装http-server（npm install -g http-server），然后在项目目录执行http-server，访问http://localhost:8080
  • Python环境：Python3执行python -m http.server，Python2执行python -m SimpleHTTPServer，访问对应的localhost地址
• 线上环境必须部署到HTTPS协议的服务器上

2. 优化代码，添加兼容性检查与事件监听 #

直接调用navigator.getGamepads()可能存在时机问题（比如手柄还未连接），同时要先检查API是否可用：

// 监听手柄连接事件，确保连接后再执行逻辑
window.addEventListener('gamepadconnected', (event) => {
  console.log('手柄已连接:', event.gamepad);
  updateControls();
});

window.addEventListener('gamepaddisconnected', () => {
  console.log('手柄已断开连接');
});

async function updateControls() {
  // 先检查API是否可用
  if (!navigator.getGamepads) {
    console.error('当前环境不支持Gamepad API');
    return;
  }
  
  const gamepad = navigator.getGamepads()[0];

  if (gamepad) {
    gpConf.buttons.padUp = gamepad.buttons[12].value
    gpConf.buttons.padDown = gamepad.buttons[13].value
    gpConf.buttons.padLeft = gamepad.buttons[14].value
    gpConf.buttons.padRight = gamepad.buttons[15].value

    // 设置摇杆轴
    gamepad.axes.forEach((value, index) => {
        gpControls.axes[index] = exponentiate(value)
    });

    // 设置按键与拨片
    gpControls.paddles.left = Number(gamepad.buttons[6].value.toFixed(3))
    gpControls.paddles.right = Number(gamepad.buttons[7].value.toFixed(3))
    gpControls.buttons.L1 = gamepad.buttons[4].value
    gpControls.buttons.R1 = gamepad.buttons[5].value
    gpControls.buttons.square = gamepad.buttons[2].value
    gpControls.buttons.triangle = gamepad.buttons[3].value

    dispatch('car-control', gpControls)
    dispatch('car-conf', gpConf)
  }

  // 用requestAnimationFrame替代setTimeout，更适合实时控制更新
  requestAnimationFrame(updateControls);
}

3. 额外检查项 #

• 更新Firefox到最新稳定版，旧版本可能存在API支持不完善的问题
• 确认手柄已正确连接到电脑，且在Windows设备管理器中能被正常识别

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