如何启用搜索菜单以在Electron Framework的应用程序中快速找到单词或短语

本文概述

1.在页面搜索中安装Electron
2.在搜索菜单中启用
3.例子

默认情况下, 在任何理智的浏览器上, 你都可以在通过简单的过程浏览的同时, 在网页上查找或搜索特定的单词或短语。你会发现查找栏对于快速搜索很有用, 并会在一段时间后自动消失。如果你正在从事电子项目, 并且生成的内容可能非常广泛, 则可以将问题保存到你的用户, 并实现应用内搜索功能。
在本文中, 我们将向你展示如何在电子应用程序中创建页内搜索功能。
1.在页面搜索中安装Electron【如何启用搜索菜单以在Electron Framework的应用程序中快速找到单词或短语】页内电子搜索模块为Electron应用程序提供了Chrome的本机页内搜索功能。 Electron将Chrome的本机API暴露给JavaScript。但是本机页内搜索API有一些陷阱和状态。因此, 此程序包将其包装起来, 并提供了更简单, 无缺陷的API。
要将其安装在你的项目中, 请在终端中运行以下命令：

npm i electron-in-page-search

页内搜索可用于Electron应用程序中的浏览器窗口或webview(BrowserWindow实例或< webview> 标记)。在渲染器过程中, 两个函数只能使用一个函数。有关此库的更多信息, 请访问Github上的官方存储库。
2.在搜索菜单中启用可以使用以下代码在渲染过程中启用菜单。你需要使用页内电子搜索模块的默认功能, 并且需要电子远程模块。初始化searchInPage函数, 提供Window的内容作为第一个参数, 这就足够了。你可以使用openSearchWindow方法打开菜单：

// Retrieve the electron in page search moduleconst searchInPage = require('electron-in-page-search').default; const remote = require('electron').remote; // or// import searchInPage from 'electron-in-page-search'; // Create an instance with the current windowconst inPageSearch = searchInPage(remote.getCurrentWebContents()); // Display the search menuinPageSearch.openSearchWindow();

接下来, 你将需要包含搜索菜单的CSS。这非常有用, 因为你可以根据需要修改菜单以使其与应用程序的样式相匹配。此外, 它可以放置在任意位置, 因为你可以将其作为任何DOM元素进行处理。
在此示例中, 我们将使其看起来像Chrome浏览器中的默认搜索菜单元素：

/** .electron-in-page-search-window is a class specified to default* < webview> element for search window.*/.electron-in-page-search-window {position: fixed; top: 0; right: 0; border: solid grey 1px; background-color: white; width: 300px; height: 36px; }/** .search-inactive is added to search window < webview> when the window* is inactive.*/.search-inactive {visibility: hidden; }/** .search-inactive is added to search window < webview> when the window* is active.*/.search-active {visibility: visible; }

将样式和初始化代码放置在应用程序中之后, 就可以运行npm start来运行应用程序并使用搜索菜单。
3.例子以下示例显示了一个非常小的电子应用程序, 该应用程序以与Chrome浏览器相同的样式显示搜索菜单??：

< !DOCTYPE html> < html> < head> < meta charset="UTF-8"> < title> Hello World!< /title> < style> /** .electron-in-page-search-window is a class specified to default* < webview> element for search window.*/.electron-in-page-search-window {position: fixed; top: 0; right: 0; border: solid grey 1px; background-color: white; width: 300px; height: 36px; }/** .search-inactive is added to search window < webview> when the window* is inactive.*/.search-inactive {visibility: hidden; }/** .search-inactive is added to search window < webview> when the window* is active.*/.search-active {visibility: visible; }< /style> < /head> < body> < h1> Hello World!< /h1> < p> Hello, some demo text.< /p> < p> Click on the following button to search for text on the document.< /p> < input type="button" id="trigger-search" value="http://www.srcmini.com/Search on document"/> < p> Text example. Try to find "esternocleidomastoideo" in the document and the word will be highlighted in the same way as the browser.< /p> < /body> < script> // Retrieve the electron in page search moduleconst searchInPage = require('electron-in-page-search').default; const remote = require('electron').remote; // or// import searchInPage from 'electron-in-page-search'; // Create an instance with the current windowconst inPageSearch = searchInPage(remote.getCurrentWebContents()); // Attach an event listener to open the search menudocument.getElementById('trigger-search').addEventListener('click', () => {inPageSearch.openSearchWindow(); }); // Alternatively add the key event listener [CTRL+F]window.addEventListener("keydown", (e) => {if ((e.ctrlKey || e.metaKey) & & e.keyCode === 70) {inPageSearch.openSearchWindow(); }}, false); < /script> < /html>

模板将生成文章图像中显示的窗口。
编码愉快！