使用 Electron 打开外部链接或文件管理器

xiyang 发布于2019-08-20 14:40 / 3723人阅读

摘要：使用打开外部链接或文件管理器此系列文章的应用示例已发布于可以或下载后运行查看欢迎中的模块允许您访问某些本地元素如文件管理器和默认浏览器此模块在主进程和渲染器进程中都可以工作在浏览器中查看完整文档在文件管理器中打开路径支持进程当前示例使

使用 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 支持, 谢谢.

GPU云服务器云服务器 electron使用webrtc 外部链接外部链接切换服务器拒绝外部链接

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81829.html

Electron入门介绍

摘要：本文主要讲解的入门。可以帮助我们管理包的下载依赖部署发布等。可以认为是中的。后续使用中，全部替换为即可。命令根据它，自动下载所需模块用于创建窗口和处理系统事件安装包的位置。 Electron是什么可以认为Electron是一种运行环境库，我们可以基于此，用HTML、JS和CSS写桌面应用。PC端的UI交互，主要有web应用和桌面应用。具体采用哪种方式，主要看系统的应用场景，哪个更合适...

wing324 2019-08-21 18:41 评论0 收藏0
用 Electron 打造 Win/Mac 应用，从「代码」到可下载的「安装包」，可能比你想得麻烦一

摘要：三配置环节目的一是为之后的环节初始化工作流参数，二是准备好应用文件夹内容即要打包的目标文件夹做的事解析命令行参数，初始化工作参数，填充配置文件，把配置文件和相关依赖文件导入到文件夹内合适的首发于酷家乐前端博客，作者@摘星（segmentfault @StinsonZhao）我们能从很多地方学习到怎么起一个 Electron 项目，有些还会介绍怎么打包或构建你的代码，但距离「真正地...

LdhAndroid 2019-08-21 17:30 评论0 收藏0
electron开发过程中遇到的一些坑

摘要：导致下载流程受阻问题中使用到子进程的时候，是把子进程当作一个外部依赖来做的，打包后并不会将子进程的代码打进到包中，需要额外进行配置。子进程中用的第三方包都需要在中进行配置。在公司开发的下载器过程中，遇到的一些坑点 1.electron中弹窗的确认取消以及系统自带的叉号之间的关系场景：在用户退出app时，需要提示用户是否确认退出，此时弹窗出现，如果点击确认就继续退出，执行回调，否则的...

FingerLiu 2019-08-26 10:36 评论0 收藏0
使用 Electron 从协议处理器启动应用程序

摘要：使用从协议处理器启动应用程序此系列文章的应用示例已发布于可以或下载后运行查看欢迎模块提供了处理协议的方法这些方法允许您设置协议和取消协议来让你的应用成为默认的应用程序类似于当浏览器请求您查看网页时的默认值在浏览器中查看完整文档从其他应使用 Electron 从协议处理器启动应用程序此系列文章的应用示例已发布于 GitHub: electron-api-demos-Zh_CN. 可以...

sarva 2019-08-21 16:58 评论0 收藏0