node.js - 如何在电子的 web 视图中创建上下文菜单
问题描述
我正在开发一个小型电子应用程序,我似乎遇到了障碍。我的应用中有一个 webview 加载到www.google.com。webview 加载正常,但是当我右键单击 webview 中的任意位置时,不会创建上下文菜单,单击页面中不是webview 的任何部分都会成功创建上下文菜单。我正在使用 electron-content-menu 创建菜单,并阅读了 git 存储库中包含的文档:https ://github.com/sindresorhus/electron-context-menu#readme ,但没有任何价值。任何帮助将不胜感激,因为我真的需要上下文菜单出现在我的网络视图中。
主.js
// Modules to control application life and create native browser window
const {app, BrowserWindow, Menu, shell} = require('electron')
const path = require('path')
var holder;
var checkmax = 0;
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 1919,
height: 1079,
frame: true,
webPreferences: {
webviewTag: true,
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html');
holder = mainWindow;
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
//testing context
const contextMenu = require('electron-context-menu');
contextMenu({
prepend: (defaultActions, params, browserWindow) => [
{
label: 'Rainbow',
// Only show it when right-clicking images
visible: params.mediaType === 'image'
},
{
label: 'Search Google for “{selection}”',
// Only show it when right-clicking text
visible: params.selectionText.trim().length > 0,
click: () => {
shell.openExternal(`https://google.com/search?q=${encodeURIComponent(params.selectionText)}`);
}
}
]
});
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body style="background-color:red;">
<webview style="position: absolute; top: 10vh; left:0; width:100vw; height: 90vh;" src="https://www.google.com/"></webview>
</body>
</html>
解决方案
经过大量试验和错误后,我想通了,我想出了这个,它适用于初始化后页面中任何生成的 webviews。
这在 Main.js 中
var menu = new Menu();
//Basic Menu For Testing
menu.append(new MenuItem({ label: 'MenuItem1', click: function() { console.log("YES");
} }));
menu.append(new MenuItem({ type: 'separator' }));
menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }));
app.on("web-contents-created", (...[/* event */, webContents]) => {
//Webview is being shown here as a window type
console.log(webContents.getType())
webContents.on("context-menu", (event, click) => {
event.preventDefault();
console.log(webContents.getType())
menu.popup(webContents);
}, false);
});
推荐阅读
- reactjs - 使用注入的 intl 模拟反应类方法
- matplotlib - 修复由赛璐珞创建的动画中的图例
- javascript - 如何通过增加
- reactjs - 对象作为 React 子级无效,呈现单个数字
- git - MAC + git gui -> 包“Tcl”的版本冲突:有 8.5.9,需要 8.6
- android - Glide 不会将图像放入 imageView
- python - 如何将 python 列表作为 column_name 和值传递给 MySQL 插入语句
- mysql - MySQL查询以查找组合行的值
- reactjs - 我在 reactjs 代码中面临搜索栏错误
- c++ - 错误:“释放后使用包装器对象 (WRAPPER_ESCAPE)”