Question

我想在电子应用程序中实现绑定到Command+R键盘快捷键的自定义操作。

我克隆了electron-quick-start repo，并将main.js文件更改为：

const { app, Menu, MenuItem, BrowserWindow } = require('electron')

let mainWindow

let template = [
  { label: app.getName(), submenu: [
    { label: 'custom action 1', accelerator: 'Command+R',       click() { console.log('go!') } },
    { label: 'custom action 2', accelerator: 'Shift+Command+R', click() { console.log('go!') } },
    { type: 'separator' },
    { role: 'quit' }
  ] }
]

const menu = Menu.buildFromTemplate(template)

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600})
  mainWindow.loadURL(`file://${__dirname}/index.html`)
  mainWindow.webContents.openDevTools()
  mainWindow.on('closed', function () { mainWindow = null })
  // Set application menu
  Menu.setApplicationMenu(menu)
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
})

当应用程序运行npm start时，该菜单有效。但是，当您按⌘R时，页面将重新加载，而不是执行模板中定义的自定义快捷方式。

我在这里缺少什么？

Answer 1

在您的index.html中添加以下代码

<script language="javascript" type="text/javascript">
//this code handles the F5/Ctrl+F5/Ctrl+R
document.onkeydown = checkKeycode
function checkKeycode(e) {
    var keycode;
    if (window.event)
        keycode = window.event.keyCode;
    else if (e)
        keycode = e.which;

    // Mozilla firefox
    if ($.browser.mozilla) {
        if (keycode == 116 ||(e.ctrlKey && keycode == 82)) {
            if (e.preventDefault)
            {
                e.preventDefault();
                e.stopPropagation();
            }
        }
    } 
    // IE
    else if ($.browser.msie) {
        if (keycode == 116 || (window.event.ctrlKey && keycode == 82)) {
            window.event.returnValue = false;
            window.event.keyCode = 0;
            window.status = "Refresh is disabled";
        }
    }
}

Answer 2

!isDev &&
app.whenReady().then(() => {
  globalShortcut.register("CommandOrControl+R", () => {
    console.log("CommandOrControl+R is pressed: Shortcut Disabled");
  });
});

this is the link to official docs for above code snippet. 根据开发或生产，您可以使用依赖项"electron-is-Dev"

动态地禁用或启用快捷方式

Answer 3

这是简单的解决方案::

app.on('browser-window-focus', function () {
    globalShortcut.register("CommandOrControl+R", () => {
        console.log("CommandOrControl+R is pressed: Shortcut Disabled");
    });
    globalShortcut.register("F5", () => {
        console.log("F5 is pressed: Shortcut Disabled");
    });
});

app.on('browser-window-blur', function () {
    globalShortcut.unregister('CommandOrControl+R');
    globalShortcut.unregister('F5');
});

Answer 4

最好使用mousetrap

https://github.com/ccampbell/mousetrap

我在electronjs.org上找到了这个解决方案 https://www.electronjs.org/docs/tutorial/keyboard-shortcuts

涉及globalShortcut的解决方案不是最佳的。使用globalShortcut不仅可以在您的应用程序中禁用所有功能的快捷方式。

例如：如果您使用globalShortcut禁用应用程序中的Ctrl + R，然后尝试在浏览器中刷新youtube视频，则会阻止您这样做。

编辑：另一种解决方案 http://www.openjs.com/scripts/events/keyboard_shortcuts/

Answer 5

<块引用>

防止浏览器窗口刷新

用户可以按 Cmd+R（在 macOS 上）或 Ctrl+R/Ctrl+Shift+R/F5（在 Windows 上）来刷新 BrowserWindow 显示的网页。真正的原生应用不会表现出这种行为。

推荐的解决方案是替换默认菜单以禁用此行为。在 Windows 上，您可以调用 win.removeMenu()。在 macOS 上，您可以调用 Menu.setApplicationMenu(Menu.buildFromTemplate([]))。您应该只在生产环境中执行此操作，因为您将无法访问 DevTools。

对于 Kiosk 模式，另一种解决方案是在 BrowserWindow 获得焦点时禁用键盘快捷键，然后在 BrowserWindow 失去焦点或关闭/隐藏时取消注册快捷键。

const electronLocalshortcut = require('electron-localshortcut')

win.on('focus', (event) => {
    electronLocalshortcut.register(win, ['CommandOrControl+R','CommandOrControl+Shift+R', 'F5'], () => {})
})

win.on('blur', (event) => {
    electronLocalshortcut.unregisterAll(win)
})

来自https://electron.guide/final-polish/renderer/

Answer 6

// main.js
const { Menu, MenuItem } = require('electron')

const menu = new Menu()
menu.append(new MenuItem({
  label: '',
  submenu: [{
    accelerator: 'CommandOrControl+R',
    click: () => { }
  }]
}))

Menu.setApplicationMenu(menu)

通过键盘快捷键电子应用

6 个答案:

防止浏览器窗口刷新