Question

我有一个反应电子应用程序，我想添加ctrl + f功能。我添加了一个globalshortcut响应ctrl + f并显示一个文本框，然后在文本框中，我给它一个调用window.find（）的更改的监听器。不幸的是，它永远不会在页面中搜索，它总是返回false。我假设这与反应组件有关，有没有办法搜索和突出显示页面上所有组件的文本？

代码：

  mainWindow.on('focus', () => {
    globalShortcut.register('CmdorCtrl+F', () => {
      mainWindow.webContents.send('find_request', 'search');
    });
});
   ipcRenderer.on('find_request', (event, arg) => {
 const modalbox = document.getElementById('modalbox');
 if (modalbox.style.display === 'block') {
   modalbox.style.display = 'none';
 } else {
    modalbox.style.display = 'block';
 }
});
searchPage(event) {
  console.log(event)
  console.log(window.find(event.value));
}

Answer 1

我想出来，觉得自己像个完全白痴：在main.js

mainWindow.webContents.on('found-in-page', (event, result) => {
if (result.finalUpdate) {
  mainWindow.webContents.stopFindInPage('keepSelection');
}
});
ipcMain.on('search-text', (event, arg) => {
  mainWindow.webContents.findInPage(arg);
});

在页面中：

static searchPage(event) {
if (event.target.value.lenght > 0) {
    ipcRenderer.send('search-text', event.target.value);
 }
}

Answer 2

为您提供替代选择，有一些组件可以帮助您完成此操作，因此您无需自己构建它。遇到相同的问题，并且首先使用electron-in-page-search进行了修复，但是该组件无法在Electron 2或更高版本上正常使用。

然后终于发现electron-find解决了我的问题。与Electron 4一起使用。

您只需将组件添加到您的项目中即可：

npm install electron-find --save

在Electron主进程中添加全局快捷方式，以ctrl + f的形式将事件发送到渲染器：

globalShortcut.register('CommandOrControl+F', () => {
    window.webContents.send('on-find');
});

然后您可以将其添加到页面（渲染过程）

const remote = require('electron').remote;
const FindInPage = require('electron-find').FindInPage;

let findInPage = new FindInPage(remote.getCurrentWebContents());

ipcRenderer.on('on-find', (e, args) => {
  findInPage.openFindWindow()
})

希望有帮助。

如何在单个页面中搜索文本reactjs / electron application

2 个答案: