5.Electron之shell(使用系统默认浏览器打开网页)

简介: 5.Electron之shell(使用系统默认浏览器打开网页)

一、核心模块

shell

const { shell } = require('electron')
 
var aHref = document.querySelector('#ahref')
 
aHref.onclick = function (e) {
    e.preventDefault()
 
    let href = this.getAttribute('href')
    shell.openExternal(href)
}

二、全部代码

index.js

var electron = require('electron') //引入electron组件
var app = electron.app //引入组件app
var BrowserWindow = electron.BrowserWindow //窗口引用
 
var mainWindow = null //申明打开窗口
 
app.on('ready', () => { //app初始化参数
    mainWindow = new BrowserWindow({
        windth: 800,
        height: 800,
        webPreferences: {
            nodeIntegration: true, //使用node功能
            contextIsolation: false,
            enableRemoteModule: true
        }
    })
    mainWindow.webContents.openDevTools() //默认打开调试模式    
    mainWindow.loadFile('index.html') //打开窗口加载的页面
    mainWindow.on('close', () => { //窗口关闭时,释放页面
        mainWindow = null
    })
})

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>Document</title>
</head>
 
<body>
    <!-- <a href="https://www.baidu.com">百度</a> -->
    <a id="ahref" href="https://www.baidu.com">百度</a>
    <script src="./render/index.js"></script>
</body>
 
</html>

/render/index.js

const { shell } = require('electron')
 
var aHref = document.querySelector('#ahref')
 
aHref.onclick = function (e) {
    e.preventDefault()
 
    let href = this.getAttribute('href')
    shell.openExternal(href)
}

三、效果

electron .

相关文章
|
1月前
|
存储 缓存 监控
|
2月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
22天前
|
监控 网络协议 Shell
ip和ip网段攻击拦截系统-绿叶结界防火墙系统shell脚本
这是一个名为“小绿叶技术博客扫段攻击拦截系统”的Bash脚本,用于监控和拦截TCP攻击。通过抓取网络数据包监控可疑IP,并利用iptables和firewalld防火墙规则对这些IP进行拦截。同时,该系统能够查询数据库中的白名单,确保合法IP不受影响。此外,它还具备日志记录功能,以便于后续分析和审计。
43 6
|
18天前
|
运维 监控 Shell
深入理解Linux系统下的Shell脚本编程
【10月更文挑战第24天】本文将深入浅出地介绍Linux系统中Shell脚本的基础知识和实用技巧,帮助读者从零开始学习编写Shell脚本。通过本文的学习,你将能够掌握Shell脚本的基本语法、变量使用、流程控制以及函数定义等核心概念,并学会如何将这些知识应用于实际问题解决中。文章还将展示几个实用的Shell脚本例子,以加深对知识点的理解和应用。无论你是运维人员还是软件开发者,这篇文章都将为你提供强大的Linux自动化工具。
|
4月前
|
JavaScript 前端开发 开发工具
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
|
3月前
|
机器学习/深度学习 人工智能 前端开发
【人工智能】利用TensorFlow.js在浏览器中实现一个基本的情感分析系统
使用TensorFlow.js在浏览器中进行情感分析是一个非常实用的应用场景。TensorFlow.js 是一个用于在JavaScript环境中训练和部署机器学习模型的库,使得开发者能够在客户端直接运行复杂的机器学习任务。对于情感分析,我们可以使用预先训练好的模型来识别文本中的积极、消极或中性情感。
107 4
【人工智能】利用TensorFlow.js在浏览器中实现一个基本的情感分析系统
|
3月前
|
网络协议 前端开发 JavaScript
浏览器加载网页的幕后之旅:从URL到页面展示详解
【8月更文挑战第31天】当在浏览器地址栏输入URL并回车后,一系列复杂过程随即启动,包括DNS解析、TCP连接建立、HTTP请求发送、服务器请求处理及响应返回,最后是浏览器页面渲染。这一流程涉及网络通信、服务器处理和客户端渲染等多个环节。通过示例代码,本文详细解释了每个步骤,帮助读者深入理解Web应用程序的工作机制,从而在开发过程中作出更优决策。
62 5
|
3月前
|
存储 JavaScript
纯Vue实现网页日常任务清单小功能(数据存储在浏览器)
这篇文章介绍了如何使用纯Vue实现一个网页日常任务清单的小功能,数据存储在浏览器中以保持数据持久化。文章内容包括功能描述、效果演示、核心代码修改方法,以及已经打包好的项目源码下载链接。作者还提供了友情提示,指出了数据存储到浏览器的核心代码部分,方便读者快速理解和应用。
|
4月前
|
SQL 关系型数据库 MySQL
|
4月前
|
Web App开发 安全 Linux
Linux系统之安装Firefox浏览器
【7月更文挑战第8天】Linux系统之安装Firefox浏览器
251 9