上下文菜单
上下文菜单是弹出式菜单，当右键单击时（或按下快捷键，如在 Windows上是 Shift + F10 ），会在应用界面显示。
Electron 默认显示任何上下文菜单。 然而，上下文菜单可以通过使用在 Menu 类实例上的 menu.popup 函数创建。 你需要监听特定的上下文菜单事件，并手动设置 menu.popup 的触发器。
在 Electron 中有两种方式监听上下文菜单事件：通过主进程中的 webContents，或者通过渲染进程的 contextmenu 页面事件。
使用 context-menu 事件（主进程）
当在特定的 WebContents 实例的范围内检测到右键单击时，将触发一个 context-menu 事件。 传递给监听器的 params 对象提供了广泛的属性列表，以区分接收事件的元素的类型。
例如，如果你想要为链接提供上下文菜单，请检查 linkURL 参数。
如果你想要检查可编辑元素，如 <textarea/>，请检查 isEditable 参数。
- main.js
- index.html
const { app, BrowserWindow, Menu } = require('electron/main')
function createWindow () {
const win = new BrowserWindow()
const menu = Menu.buildFromTemplate([
{ role: 'copy' },
{ role: 'cut' },
{ role: 'paste' },
{ role: 'selectall' }
])
win.webContents.on('context-menu', (_event, params) => {
// only show the context menu if the element is editable
if (params.isEditable) {
menu.popup()
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Context Menu Demo</title>
</head>
<body>
<h1>Context Menu Demo</h1>
<textarea></textarea>
</body>
</html>
使用 contextmenu 事件（渲染进程）
或者，你也可以监听渲染进程中DOM元素上可用的 contextmenu
事件，并通过 IPC 调用 menu.popup 函数。
提示
要了解更多 Electron 中的 IPC 基础知识，请参阅 进程间通信 指南。
- main.js
- preload.js
- index.html
// Modules to control application life and create native browser window
const { app, BrowserWindow, ipcMain, Menu } = require('electron/main')
const path = require('node:path')
function createWindow () {
const mainWindow = new BrowserWindow({
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
mainWindow.loadFile('index.html')
const menu = Menu.buildFromTemplate([
{ role: 'copy' },
{ role: 'cut' },
{ role: 'paste' },
{ role: 'selectall' }
])
ipcMain.on('context-menu', (event) => {
menu.popup({
window: BrowserWindow.fromWebContents(event.sender)
})
})
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
const { ipcRenderer } = require('electron/renderer')
document.addEventListener('DOMContentLoaded', () => {
const textarea = document.getElementById('editable')
textarea.addEventListener('contextmenu', (event) => {
event.preventDefault()
ipcRenderer.send('context-menu')
})
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Context Menu Demo</title>
</head>
<body>
<h1>Context Menu Demo</h1>
<textarea id="editable"></textarea>
</body>
</html>
额外的 macOS 菜单项（如写作工具）
在 macOS上，写作工具、自动填充和服务菜单项在 Electron 上下文菜单中被默认禁用。 若要启用这些功能，需要将目标 webContents的 WebFrameMain 传递到 menu.popup 中的 frame 参数。
Associating a frame to the context menu
const { BrowserWindow, Menu } = require('electron/main')
const menu = Menu.buildFromTemplate([{ role: 'editMenu' }])
const win = new BrowserWindow()
win.webContents.on('context-menu', (_event, params) => {
// Whether the context is editable.
if (params.isEditable) {
menu.popup({
frame: params.frame
})
}
})