electron通过链接打开默认浏览器
文章目录
- electron通过链接打开默认浏览器
- 一、项目编写
- 1. html页面
- 2. 主进程代码
- 3. 渲染进程代码
- 二、实现效果
一、项目编写
1. html页面
index.html 代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通过连接打开浏览器</title>
</head>
<body>
<a id="aHref" href="https://www.baidu">百度</a>
<!-- 引入对应的js文件 -->
<script src="../js/render.js"></script>
</body>
</html>
2. 主进程代码
main.js 代码如下（示例）：
// main.js
const electron = require("electron")
const app = electron.app
const BrowserWindow = electron.BrowserWindow
// 声明要打开的窗口
let mainWindow = null
app.on("ready",()=>{
mainWindow = new BrowserWindow({
width:800,
height:800,
webPreferences:{
nodeIntegration:true, //开启node接口
contextIsolation:false,
}
});
// 打开调试工具
mainWindow.webContents.openDevTools();
mainWindow.loadFile("index.html");
})
// 当所有窗口被关闭了，退出。
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});
3. 渲染进程代码
render.js 代码如下（示例）：
// index.html 对应渲染程序
const {shell} = require("electron");
// 通过链接在浏览器中打开页面
// 箭头函数写法
let aHref = document.querySelector("#aHref");
aHref.onclick = (e)=>{
e.preventDefault();
let href = aHref.getAttribute("href");
shell.openExternal(href);
}
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
二、实现效果
electron通过链接打开默认浏览器
文章目录
- electron通过链接打开默认浏览器
- 一、项目编写
- 1. html页面
- 2. 主进程代码
- 3. 渲染进程代码
- 二、实现效果
一、项目编写
1. html页面
index.html 代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通过连接打开浏览器</title>
</head>
<body>
<a id="aHref" href="https://www.baidu">百度</a>
<!-- 引入对应的js文件 -->
<script src="../js/render.js"></script>
</body>
</html>
2. 主进程代码
main.js 代码如下（示例）：
// main.js
const electron = require("electron")
const app = electron.app
const BrowserWindow = electron.BrowserWindow
// 声明要打开的窗口
let mainWindow = null
app.on("ready",()=>{
mainWindow = new BrowserWindow({
width:800,
height:800,
webPreferences:{
nodeIntegration:true, //开启node接口
contextIsolation:false,
}
});
// 打开调试工具
mainWindow.webContents.openDevTools();
mainWindow.loadFile("index.html");
})
// 当所有窗口被关闭了，退出。
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});
3. 渲染进程代码
render.js 代码如下（示例）：
// index.html 对应渲染程序
const {shell} = require("electron");
// 通过链接在浏览器中打开页面
// 箭头函数写法
let aHref = document.querySelector("#aHref");
aHref.onclick = (e)=>{
e.preventDefault();
let href = aHref.getAttribute("href");
shell.openExternal(href);
}
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。