Electron JS如何调用index页面渲染的函数并通过globalShortcut触发

核心逻辑：Electron的globalShortcutAPI仅支持在主进程中调用，因此需要主进程作为中转层：主进程监听到全局快捷键触发后，通过IPC通道向index页对应的渲染进程发送事件，渲染进程监听该IPC事件后调用本地页面函数即可。

步骤1：主进程注册全局快捷键并发送IPC事件 #

主进程（通常为main.js）示例代码：

const { app, globalShortcut, BrowserWindow } = require('electron')
const path = require('path')
let mainWindow // 存储index页对应的窗口实例

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js') // 配置预加载脚本
    }
  })
  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
  // 注册全局快捷键，示例为Ctrl+Shift+X
  const ret = globalShortcut.register('CommandOrControl+Shift+X', () => {
    // 判断窗口实例存在且未被销毁
    if (mainWindow && !mainWindow.isDestroyed()) {
      // 向index页的渲染进程发送IPC事件，事件名可自定义，此处为trigger-render-func
      mainWindow.webContents.send('trigger-render-func')
    }
  })
  if (!ret) {
    console.log('快捷键注册失败，可能已被其他应用占用')
  }
})

// 应用退出前注销所有全局快捷键
app.on('will-quit', () => {
  globalShortcut.unregisterAll()
})

步骤2：预加载脚本暴露IPC监听方法 #

符合Electron安全规范的上下文隔离模式下，需要在preload.js中通过contextBridge暴露监听方法，示例代码：

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  // 暴露监听快捷键触发事件的方法
  onTriggerRenderFunc: (callback) => ipcRenderer.on('trigger-render-func', callback)
})

步骤3：index页面监听事件调用目标函数 #

在index.html的业务代码中直接调用预加载脚本暴露的方法，触发本地函数即可：

// index页面中你需要调用的目标函数
function myIndexPageFunc() {
  console.log('全局快捷键触发，执行index页函数')
  // 你的业务逻辑
}

// 监听主进程发送的IPC事件，触发后调用目标函数
window.electronAPI.onTriggerRenderFunc(() => {
  myIndexPageFunc()
})

注意事项 #

• 注册快捷键前可通过globalShortcut.isRegistered('快捷键组合')判断是否已被占用，避免注册失败
• 如果存在多窗口场景，需精准匹配index页对应的BrowserWindow实例再发送IPC事件，避免误触发其他窗口的逻辑
• 未开启上下文隔离的旧项目可直接在渲染进程引入ipcRenderer监听事件，但该方案存在安全风险，不推荐使用

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