在使用electron开发桌面程序的过程中，我们可能经常需要让electron程序中包含的链接在被点击后直接调用系统的默认浏览器打开，仔细看了文档的都知道其核心原理就是通过electron的shell模块中的openExternal方法来调用系统默认浏览器打开链接，但是对于其实现又有不同的方法，彻底的接管，选择性的接管，瞎 main介绍3中行之有效的方法。
1、在渲染进程中选择所有的a标签，覆盖a标签的默认点击方法，代码如下：
|
1
2
3
4
5
6
7
8
9
10
|
const { shell } = require('electron');
const links = document.querySelectorAll('a[href]')；
links.forEach(link => {
link.addEventListener('click', e => {
const url = link.getAttribute('href');
e.preventDefault();
shell.openExternal(url);
});
});
|
这种方法的优点是可以精确控制，比如我们可以控制部分链接用系统浏览器打开，部分链接在electron直接打开，缺点就是这个方式只能接管自己可以维护的网页，不能更改第三方网页中链接的打开方式。
2、该方法与上一种方法类似，只不过换了一种角度来实现，这里打开连接并不在渲染进程中直接做，而是通过和主进程通信来告诉主进程调用系统浏览器打开链接，具体代码如下：
主进程代码：
|
1
2
3
4
5
6
7
|
const { app, BrowserWindow, shell, ipcMain } = require('electron');
...
ipcMain.on('open-url', (event, url) => {
shell.openExternal(url);
});
...
|
渲染进程代码：
|
1
2
3
4
5
6
7
8
9
10
|
const { shell, ipcRender } = require('electron');
const links = document.querySelectorAll('a[href]')；
links.forEach(link => {
link.addEventListener('click', e => {
const url = link.getAttribute('href');
e.preventDefault();
ipcRender.send('open-url', url);
});
});
|
上面说了这种方法和上一种方法实现的切入点不太一样，所以和上面的方法有一样的优缺点，对于第三方网站或者iframe中的链接就力所不能及了，那么如何让iframe中的链接也能直接调用系统默认浏览器打开呢？这就是我们要介绍的似3种方式了。
3、通过在主进程中监听webContents的new-window事件来拦截所有的链接，具体代码：
|
1
2
3
4
5
6
7
8
|
const { shell, app } = require('electron');
app.on('web-contents-created', (e, webContents) => {
webContents.on('new-window', (event, url) => {
event.preventDefault();
shell.openExternal(url);
});
});
|
这种方式接管了所有链接的打开方式，优点就是可以处理iframe中或第三方网站链接的打开方式，缺点也很明显，不能单独控制那一类链接通过默认浏览器打开，哪一类链接通过electron直接打开。
以上3种方法都能在electron中实现调用默认浏览器打开链接，但都葛优优缺点，实际开发中可以根据需求来选择合适的方法。
在使用electron开发桌面程序的过程中，我们可能经常需要让electron程序中包含的链接在被点击后直接调用系统的默认浏览器打开，仔细看了文档的都知道其核心原理就是通过electron的shell模块中的openExternal方法来调用系统默认浏览器打开链接，但是对于其实现又有不同的方法，彻底的接管，选择性的接管，瞎 main介绍3中行之有效的方法。1、在渲染进程中选择所有的a标签，覆盖a标签的默认点击方法，代码如下： 1 2 3 4 5 6
最近公司要做windows客户端，但是公司还缺少C#的开发人员🎫，网上很早就有了
electron
实现
windows客户端，于是就需要前端的同事通过
electron
来
实现
一款应用替代C# winform 窗体🎨。
什么是
electron
?
官网解释：使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序，每一个窗体就是对应的一个html页面
官网也提供了快速入门的方案，相关代码如下。
#克隆这个仓库
git 克隆 https://github.com/
electron
/
var
electron
= require('
electron
')
var app =
electron
.app
var BrowserWindow =
electron
.BrowserWindow
var mainWindow = null
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 400,
height: 300,
webPre
最新因为业务需要，用
electron
做一个桌面应用。在使用
electron
的shell模块的
open
External
时，总是出现Failed to
open
。开始以为是代码写的不对，各
种
检查没问题。最后发现是因为系统
默认
浏览器
IE让我卸载了，所以打不开，
electron
就会报“Failed to
open
”错误。只要更换一下系统
默认
浏览器
就OK了。
上期内容我们学了如何在
浏览器
中
打开
网页，这节我们学习一下如何用BrowserView来嵌入一个网页到我们应用中，这很类似Web中的<iframe>标签。需要注意的是BrowserView是主进程中的类，所以只能在主进程中使用。
在主线程中用BrowserView嵌入网页
打开
根目录下
打开
main.js,直接引入并使用BrowserView就可以
实现
键入网页到应用中。
var BrowserVie.
使用
Electron
打开
外部
链接
或文件管理器
此系列文章的应用示例已发布于 GitHub:
electron
-api-demos-Zh_CN. 可以 Clone 或下载后运行查看. 欢迎 Star .
Electron
中的 shell 模块允许您访问某些本地元素, 如文件管理器和
默认
Web
浏览器
.
此模块在主进程和渲染器进程中...
在使用
electron
开发桌面程序的过程中，我们可能经常需要让
electron
程序中包含的
链接
在被点击后直接调用系统的
默认
浏览器
打开
，仔细看了文档的都知道其核心原理就是通过
electron
的shell模块中的
open
External
方法来调用系统
默认
浏览器
打开
链接
，但是对于其
实现
又有不同的方法，彻底的接管，选择性的接管，瞎 main介绍3中行之有效的方法。
1、在渲染进程中选择所有的a标签，覆盖a标签的
默认
点击方法，代码如下：
const { shell } = require('
electron
');
需求：在
electron
桌面应用中，需要让
链接
在被点击后直接调用系统
默认
浏览器
打开
指定页面。
问题：我也是才接触
Electron
，隐约知道可以用主进程和渲染进程之间的通信来解决，但在实际写代码过程中总是报错：TypeError: fs.existsSync is not a function
产生原因：我前端采用的Vue框架，总是报这个错，还是因为我前端工程没有集成好Node的环境，除了在主进程配置好nodeIntegration:true,在渲染进程中也要引入
electron
代码
实现
1. 在HTML文件中引入Bootstrap的CSS文件和JavaScript文件。
2. 在HTML文件中使用Bootstrap的网格系统来布局页面，可以使用容器、行和列来
实现
。
3. 使用Bootstrap的CSS类来设置页面元素的样式，如文字、颜色、背景等。
4. 使用Bootstrap的组件来
实现
页面的功能，如导航栏、表格、表单等。
5. 使用Bootstrap的JavaScript插件来增强页面的交互性，如模态框、轮播图、下拉菜单等。
总之，使用Bootstrap可以快速、简单地
实现
响应式布局，提高页面的用户体验。
