当前位置: 首页 > Web前端 > HTML5

Electron的页内搜索模块介绍

时间:2023-04-05 22:17:48 HTML5

简介实现Electron应用页面中通过关键词搜索匹配文本的功能依赖Electron的findInPageAPI支持用户灵活配置UI界面支持区分大小写自动搜索搜索输入用户输入文本框时隔离,不会匹配支持以下Electron版本^1.8.7,^2.0.0,^3.0.0,^4.0.0支持以下平台Windows,Linux,MacDemo默认UI自定义UI安装$npminstallelectron-find--saveuse#导入模块import{remote,ipcRenderer}from'electron'import{FindInPage}from'electron-find'#使用默认配置创建实例letfindInPage=newFindInPage(remote.getCurrentWebContents())findInPage。openFindWindow()#开启预加载选项,创建实例时会同时加载搜索窗口相关的domletfindInPage=newFindInPage(remote.getCurrentWebContents(),{preload:true})findInPage.openFindWindow()#配置父节点元素,默认为document.bodyletfindInPage=newFindInPage(remote.getCurrentWebContents(),{parentElement:document.querySelector('#id')})findInPage.openFindWindow()#配置显示或隐藏的过渡期搜索窗口,默认300(ms)letfindInPage=newFindInPage(remote.getCurrentWebContents(),{duration:200})findInPage.openFindWindow()#配置搜索窗口相对父定位节点的偏移量letfindInPage=newFindInPage(remote.getCurrentWebContents(),{offsetTop:20,offsetRight:30})findInPage.openFindWindow()#自定义UI界面颜色letfindInPage=newFindInPage(remote.getCurrentWebContents(),{boxBgColor:'#333',boxShadowColor:'#000',inputColor:'#aaa',inputBgColor:'#222',inputFocusColor:'#555',textColor:'#aaa',textHoverBgColor:'#555',caseSelectedColor:'#555'})findInPage.openFindWindow()#参考demonpminstallnpmrune快捷键Enter:查找下一个Shift+Enter:查找上一个Esc:关闭窗口另外可以参考demo使用全局快捷键打开窗口API类:FindInPagenewFindInPage(webContents,[options])webContentsObject(required)-呈现进程的webContents对象。optionsObject(optional)preloadBoolean-创建实例时是否预加载搜索窗口。默认为假。parentElement对象-指定查找器窗口的父节点。默认为document.body。durationNumber-指定查找窗口显示或隐藏的过渡期。默认值为300(毫秒)。offsetTopNumber-指定搜索窗口相对于父定位元素的顶部偏移量。默认值为5。offsetRightNumber-指定搜索窗口相对于父定位元素的右偏移量。默认值为5。boxBgColorString-配置查找窗口的背景颜色。默认为“#ffffff”。boxShadowColorString-配置查找窗口的阴影颜色。默认为“#909399”。inputColorString-配置输入框的文本颜色。默认为“#606266”。inputBgColorString-配置输入框的背景颜色。默认为“#f0f0f0”。inputFocusColorString-配置输入框获得焦点时的边框颜色。默认为“#c5ade0”。textColorString-配置搜索窗口中的文本颜色。默认为“#606266”。textHoverBgColorString-配置鼠标悬停在文本上时的背景颜色。默认为“#eaeaea”。caseSelectedColorString-配置选择区分大小写选项时的边框颜色。默认为“#c5ade0”。实例方法使用newFindInPage创建的实例具有以下方法:findInPage.openFindWindow()在FindWindow关闭时打开FindWindow。当搜索窗口已经打开时,聚焦输入框。findInPage.closeFindWindow()关闭窗口。findInPage.destroy()关闭窗口,清除对对象的引用,并释放内存。查看更多:https://github.com/TheoXiong/electron-find

最新推荐
猜你喜欢