admin管理员组

文章数量:1613770

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