使用 Electron 打开外部链接或文件管理器
此系列文章的应用示例已发布于 GitHub: electron-api-demos-Zh_CN. 可以 Clone 或下载后运行查看. 欢迎 Star .
Electron 中的 shell
模块允许您访问某些本地元素, 如文件管理器和默认 Web 浏览器.
此模块在主进程和渲染器进程中都可以工作.
在浏览器中查看 完整 API 文档.
在文件管理器中打开路径
支持: Win, macOS, Linux | 进程: Both
当前示例使用 shell
模块在特定位置打开系统文件管理器.
单击示例按钮将在根目录中打开文件管理器.
渲染器进程
const shell = require('electron').shell
const os = require('os')
const fileManagerBtn = document.getElementById('open-file-manager')
fileManagerBtn.addEventListener('click', function (event) {
shell.showItemInFolder(os.homedir())
})
打开外部链接
支持: Win, macOS, Linux | 进程: Both
如果您不希望在当前应用程序中打开网站链接, 可以使用 shell
模块在外部打开. 当点击链接之后将在用户的默认浏览器中打开.
当点击示例按钮时, 将在您的浏览器中打开 Electron 的网站.
渲染器进程
const shell = require('electron').shell
const exLinksBtn = document.getElementById('open-ex-links')
exLinksBtn.addEventListener('click', function (event) {
shell.openExternal('http://electron.atom.io')
})
高级技巧
在外部打开所有出站链接.
您可能需要打开应用外部的所有 http
和 https
链接. 为此, 查询文档并循环遍历每个链接并添加一个监听器. 此应用程序使用位于 assets/ex-links.js
下面的代码.
渲染器进程
const shell = require('electron').shell
const links = document.querySelectorAll('a[href]')
Array.prototype.forEach.call(links, function (link) {
const url = link.getAttribute('href')
if (url.indexOf('http') === 0) {
link.addEventListener('click', function (e) {
e.preventDefault()
shell.openExternal(url)
})
}
})
如果这边文章对您有帮助, 感谢 下方点赞 或 Star GitHub: electron-api-demos-Zh_CN 支持, 谢谢.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。