如何仅在Electron应用窗口处于焦点时按下指定按键创建新窗口

核心实现逻辑 #

使用Electron原生的before-input-event窗口事件即可实现，该事件仅在对应窗口处于激活聚焦状态时触发，不会全局响应，完全匹配需求。

具体实现代码 #

主进程代码示例 #

const { app, BrowserWindow } = require('electron')
let mainWindow

function createMainWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false // 开启上下文隔离也不影响该事件生效，无需额外适配
    }
  })
  mainWindow.loadFile('index.html')

  // 监听窗口的输入事件，仅窗口聚焦时触发
  mainWindow.webContents.on('before-input-event', (event, input) => {
    // 示例匹配快捷键：Ctrl+N（Windows/Linux）/ Cmd+N（Mac）
    if ((input.control || input.meta) && input.key.toLowerCase() === 'n' && !input.isAutoRepeat) {
      event.preventDefault() // 阻止系统默认行为（如浏览器默认新建标签）
      createNewWindow() // 调用新建窗口逻辑
    }
    // 若要匹配单键，比如F4，直接写 input.key === 'F4' 即可
  })
}

// 新建窗口逻辑
function createNewWindow () {
  const newWin = new BrowserWindow({
    width: 600,
    height: 400
  })
  newWin.loadFile('new-window.html')
}

app.whenReady().then(createMainWindow)
// 常规应用生命周期逻辑省略

上下文隔离适配说明 #

如果项目开启了官方推荐的contextIsolation: true配置，上述代码无需任何修改，before-input-event是主进程层面的监听事件，不受渲染进程上下文隔离规则影响。

原有方案失效原因说明 #

• 渲染进程监听keydown/keyup事件失效：事件会被页面内的输入控件、iframe或者其他冒泡阻止逻辑拦截，仅页面空白处聚焦时才会触发，稳定性极低
• globalShortcuts是全局触发的设计特性，本身就不符合窗口聚焦才响应的需求
• 第三方库mousetrap本质是监听DOM事件，和渲染进程直接监听的问题一致，同样存在被拦截的可能

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