srcmini本文概述
默认情况下, 在任何理智的浏览器上, 你都可以在通过简单的过程浏览的同时, 在网页上查找或搜索特定的单词或短语。你会发现查找栏对于快速搜索很有用, 并会在一段时间后自动消失。如果你正在从事电子项目, 并且生成的内容可能非常广泛, 则可以将问题保存到你的用户, 并实现应用内搜索功能。
在本文中, 我们将向你展示如何在电子应用程序中创建页内搜索功能。
1.在页面搜索中安装Electron
页内电子搜索模块为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 module
const 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 window
const inPageSearch = searchInPage(remote.getCurrentWebContents());
// Display the search menu
inPageSearch.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="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 module
const 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 window
const inPageSearch = searchInPage(remote.getCurrentWebContents());
// Attach an event listener to open the search menu
document.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>模板将生成文章图像中显示的窗口。
编码愉快！
评论前必须登录！
注册