如何在单页 reactjs/electron 应用程序中搜索文本
How do I search text in a single page reactjs/electron application
我有一个 React Electron 应用程序,我想为其添加 ctrl+f 功能。我添加了一个响应 ctrl+f 并显示文本框的全局快捷方式,然后在文本框上,我给它一个调用 window.find() 的更改侦听器。
不幸的是,这永远不会在页面中搜索,它总是 returns 错误。我假设这与反应组件有关,有没有办法搜索和突出显示页面上所有组件的文本?
代码:
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));
}
我明白了这一点,感觉自己像个彻头彻尾的白痴:
在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);
}
}
为了给你一个替代方案,有一些组件可以为你做这件事,所以你不需要自己构建它。
遇到了同样的问题,首先使用 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()
})
希望对您有所帮助。
我有一个 React Electron 应用程序,我想为其添加 ctrl+f 功能。我添加了一个响应 ctrl+f 并显示文本框的全局快捷方式,然后在文本框上,我给它一个调用 window.find() 的更改侦听器。 不幸的是,这永远不会在页面中搜索,它总是 returns 错误。我假设这与反应组件有关,有没有办法搜索和突出显示页面上所有组件的文本?
代码:
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));
}
我明白了这一点,感觉自己像个彻头彻尾的白痴: 在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);
}
}
为了给你一个替代方案,有一些组件可以为你做这件事,所以你不需要自己构建它。 遇到了同样的问题,首先使用 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()
})
希望对您有所帮助。