Electron浏览器视图未捕获鼠标事件。

Question

我有一个基于 Electron 的浏览器应用程序，需要渲染客户端应用程序。我曾尝试使用 Electron 的 webview 来渲染我的应用程序，但它们不被推荐，且默认情况下已禁用。此外，由于 Chromium 的 OOPIF（进程外 IFrames）架构位于 webviews 后面，无法捕获对我的应用程序至关重要的键盘和鼠标事件。

因此，我正在使用较新的 BrowserView API，并将其用于渲染我的客户端 Web 应用程序。但遗憾的是，我只能使用 before-input-event 事件来捕获键盘事件。

以下是我的代码示例。

let mainWindow = null;

app.on('ready', () => {
  mainWindow = new BrowserWindow({ show: false });
  mainWindow.setBounds({ x: 0, y: 0, width: 800, height: 600 })
  mainWindow.once('ready-to-show', () => {
    mainWindow.show();
  });

  let view = new BrowserView()
  mainWindow.setBrowserView(view)
  view.webContents.loadURL('https://electronjs.org')
  view.webContents.on('before-input-event', (event, input) => {
    console.log(event, input);
  });
});

我查看了Electron的github问题和官方文档，但没有找到任何信息。有人发现如何从BrowserView内部捕获鼠标事件吗？任何帮助都将非常感激。

- Gaurab Kc

Answer 1

通过使用预加载WebPreferences来为Browserview提供ipcRenderer的支持，在其中可以使用preload.js脚本。

document.addEventListener('click', (event) => {
  ipcRenderer.send('something', event);
});

在 Electron 主进程中，您需要使用 preload 并调用 ipcMain 来捕获鼠标数据。

let view = new BrowserView({
 webPreferences: {
  preload: path.join(__dirname, 'preload.js'),
 }
});

ipcMain.on('something', function (event, arg) {
  // your code here
})

- raman