admin 管理员组

文章数量: 887021

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学习 第十章通过链接打开浏览器 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1726853916h1039975.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。