当前位置: 首页 > news >正文

Electron学习笔记(三)

文章目录

      • 相关笔记
      • 笔记说明
    • 五、界面
      • 1、获取 webContents 实例
        • (1)通过窗口对象的 webContent 属性获取 webContent 实例:
        • (2)获取当前激活窗口的 webContents 实例:
        • (3)在渲染进程中获取当前窗口的 webContents 实例:
        • (4)通过 id 获取 webContents 实例:
        • (5)遍历应用内的 webContents 对象:
      • 2、页面加载事件及触发顺序
      • 3、页面跳转事件
      • 4、页面缩放
      • 5、页面容器
      • 6、脚本注入
        • (1) 通过 preload 参数注入脚本
        • (2) 通过 executeJavaScript 注入脚本
        • (3) 通过 insertCSS 注入样式
      • 7、使用 Javascript 控制动画

相关笔记

  • Electron学习笔记(一)
  • Electron学习笔记(二)
  • Electron学习笔记(三)
  • Electron学习笔记(四)
  • Electron学习笔记(五)
  • Electron学习笔记(六)
  • 使用 electron-vite-vue 构建 electron + vue3 项目并打包

笔记说明

文本为学习《Electron 实战 入门、进阶与性能优化 刘晓伦 著》时所记录的笔记 主要将书本上的案例运行一遍,针对原理部分并无相关记录。笔记记录于 2023年9月。

五、界面

1、获取 webContents 实例

(1)通过窗口对象的 webContent 属性获取 webContent 实例:
let webContent = win.webContents;
(2)获取当前激活窗口的 webContents 实例:
const { webContents } = require('electron');
let webContent = webContents.getFocusedWebContents();
(3)在渲染进程中获取当前窗口的 webContents 实例:
const { remote } = require('electron');
let webContent = remote.getCurrentWebContents();
(4)通过 id 获取 webContents 实例:

创建窗口时 Electron 会为相应的 webContents 设置一个整型的 id

const { webContents } = require('electron');
let webContent = webContents.fromId(yourId);
(5)遍历应用内的 webContents 对象:
const { webContents } = require('electron');
let webContentArr = webContents.getAllWebContents();for (let webContent of webContentArr) {if (webContent.getURL().includes('baidu')) {console.log('do what you want');}
}

2、页面加载事件及触发顺序

通过 webContents 对象监听以下事件:

顺序
事件
说明
1did-start-loading页面加载过程中的第一个事件。如果该事件在浏览器中发生,那么意味着此时浏览器tab页的旋转图标开始旋转,如果页面发生跳转,也会触发该事件
2page-title-updated页面标题更新事件,事件处理函数的第二个参数为当前的页面标题
3dom-ready页面中的dom加载完成时触发
4did-frame-finish-load框架加载完成时触发。页面中可能会有多个 iframe ,所以该事件可能会被触发多次,当前页面为 mainFrame
5did-finish-load当前页面加载完成时触发。注意,此事件在 did-frame-finish-load 之后触发
6page-favicon-updated页面 icon 图标更新时触发
7did-stop-loading所有内容加载完成时触发。如果该事件在浏览器中发生,那么意味着此时浏览器tab页的旋转图标停止旋转

3、页面跳转事件

通过 webContents 对象监听以下事件:

事件
说明
will-redirect当服务端返回了一个301或者302跳转后,浏览器正准备跳转时,触发该事件。Electron可以通过 event.preventDefault() 取消此事件,禁止跳转继续执行
did-redirect-navigation当服务端返回了一个301或者302跳转后,浏览器开始跳转时,触发该事件。Electron不能取消此事件。此事件一般发生在 will-redirect 之后
did-start-navigation用户点击了某个跳转链接或者JavaScript设置了 window.location.href 属性,页面(包含页面内任何一个 frame 子页面)发生页面跳转之时,会触发该事件。此事件一般发生在 will-navigate 之后
will-navigate用户点击了某个跳转链接或者JavaScript设置了 window.location.href 属性,页面发生跳转之前,触发该事件。然而当调用 webContents.loadURL 和 webContents.back 时并不会触发该事件。此外,当更新 window.location.hash 或者用户点击了一个锚点链接时,也并不会触发该事件
did-navigate-in-page当更新 window.location.hash 或者用户点击了一个锚点链接时,触发该事件
did-frame-navigate主页面(主页面 main frame 也是一个 frame )和子页面跳转完成时触发。当更新 window.location.hash 或者用户点击了一个锚点链接时,不会触发该事件
did-navigate主页面跳转完成时触发该事件(子页面不会)。当更新 window.location.hash 或者用户点击了一个锚点链接时,并不会触发该事件

4、页面缩放

通过 webContents 的 setZoomFactor 方法设置页面的缩放比例:

const { remote } = require("electron");
let webContents = remote.getCurrentWebContents();
webContents.setZoomFactor(0.3)
let factor = webContents.getZoomFactor();
console.log(factor); //输出0.3

通过 webContents 的 setZoomLevel 方法设置页面的缩放等级:

const { remote } = require("electron");
let webContents = remote.getCurrentWebContents();
webContents.setZoomLevel(-6)
let level = webContents.getZoomLevel();
console.log(level); //输出-6

5、页面容器

BrowserView: 用于在页面中嵌入其他页面。它依托 BrowserWindow 存在,可以绑定到 BrowserWindow 的一个具体的区域。

let view = new BrowserView({webPreferences: { // preload}
});
win.setBrowserView(view);let size = win.getSize();
// setBounds:绑定到窗口的具体区域
view.setBounds({x: 0,y: 80,width: size[0],height: size[1] - 80
});
// setAutoResize:设置自己在宽度和高度上自适应父窗口的宽度和高度的变化
view.setAutoResize({width: true,height: true
});
view.webContents.loadURL(url);

隐藏 BrowserView:

方法一:

// 隐藏
win.removeBrowserView(view);
// 显示
win.addBrowserView(view);

方法二:

//显示
view.webContents.insertCSS('html{display: block}'); 
//隐藏
view.webContents.insertCSS('html{display: none}'); 

6、脚本注入

在使用 Vue CLI ⇡ 搭建完项目的基础上:

(1) 通过 preload 参数注入脚本

public/ 目录下新建一个文件 preload.js ,文件内容如下:

const fs = require('fs');window.onload = function () {// 修改图片document.querySelector('#s_lg_img').src = 'https://pic.netbian.com/uploads/allimg/230714/004250-1689266570104f.jpg';// 可以在脚本内使用 Node.js API// fs.appendFileSync('./test.txt','xxx',err =>{})
}

修改 src/background.js 文件:

const path = require('path');// 修改请求头 User-Agent(应用中所有的页面加载请求都会使用此 User-Agent)
// app.userAgentFallback = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0';async function createWindow() {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {// 加载 preload.js 文件preload: path.join(__static, 'preload.js'),}});win.loadURL('https://www.baidu.com/');// 单独设置请求头 User-Agent// win.webContents.loadURL('https://www.baidu.com/', {//     userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox / 68.0'// })
}

注意:考虑到安全问题,nodeIntegration 不建议开启

运行程序:

运行结果


(2) 通过 executeJavaScript 注入脚本

说明:executeJavaScript 方法适用于注入代码量较少的情况。

修改 src/background.js 文件:(效果同上)

async function createWindow() {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {}});win.loadURL('https://www.baidu.com/');win.webContents.executeJavaScript("document.querySelector('#s_lg_img').src = 'https://pic.netbian.com/uploads/allimg/230714/004250-1689266570104f.jpg'");
}

(3) 通过 insertCSS 注入样式

核心代码如下:

win.loadURL('https://www.baidu.com/');// 将目标页面的背景颜色修改为 黑色
win.webContents.insertCSS("html, body { background-color: #000 !important; }");

7、使用 Javascript 控制动画

在使用 Vue CLI ⇡ 搭建完项目的基础上:

此时使用 JavaScript 的动画 API —— Web Animations API 控制动画。

修改 src/App.vue 文件中的 template 内容:

<template><div id="app"><img alt="Vue logo" src="./assets/logo.png" ref="logo"><HelloWorld msg="Welcome to Your Vue.js App" /><!-- 动画相关的操作 --><button @click="pause">暂停</button><button @click="play">开启</button><button @click="reverse">重播</button></div>
</template>

修改 src/App.vue 文件中的 script 内容:

<script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld},data() {return {keyframes: [{transform: "translate(0px, -120px)",opacity: 0}, {transform: "translate(0px, 0px)",opacity: 1}],{/* 动画相关的属性控制 */}options: {iterations: 1,delay: 0,duration: 800,easing: "ease"},myAnimation: '',}},mounted() {this.myAnimation = this.$refs.logo.animate(this.keyframes,this.options);},methods: {pause() {this.myAnimation.pause();},play() {this.myAnimation.play();},reverse() {this.myAnimation.reverse();},}
}
</script>

参数说明:

此处的 keyframes 相当于定义一个动画,规定动画的开始和结束的位置及透明度。

keyframes: [{transform: "translate(0px, -120px)",opacity: 0
}, {transform: "translate(0px, 0px)",opacity: 1
}]

此处的 options 用于设置动画的相关属性。
iterations --> animation-iteration-count (规定动画被播放的次数)
delay --> animation-delay (规定动画何时开始)
duration --> animation-duration (动画持续时间)
easing -->(运动曲线)

options: {iterations: 1,delay: 0,duration: 800,easing: "ease"
}

相关文章:

Electron学习笔记(三)

文章目录 相关笔记笔记说明 五、界面1、获取 webContents 实例&#xff08;1&#xff09;通过窗口对象的 webContent 属性获取 webContent 实例&#xff1a;&#xff08;2&#xff09;获取当前激活窗口的 webContents 实例&#xff1a;&#xff08;3&#xff09;在渲染进程中获…...

【Redis】Redis键值存储

大家好&#xff0c;我是白晨&#xff0c;一个不是很能熬夜&#xff0c;但是也想日更的人。如果喜欢这篇文章&#xff0c;点个赞&#x1f44d;&#xff0c;关注一下&#x1f440;白晨吧&#xff01;你的支持就是我最大的动力&#xff01;&#x1f4aa;&#x1f4aa;&#x1f4aa…...

C++系统编程篇——Linux初识(系统安装、权限管理,权限设置)

(1)linux系统的安装 双系统---不推荐虚拟机centos镜像&#xff08;可以使用&#xff09;云服务器/轻量级云服务器&#xff08;强烈推荐&#xff09; ①云服务器&#xff08;用xshell连接&#xff09; ssh root公网IP 然后输入password ①添加用户&#xff1a; addus…...

No Cortex-M SW Device Found

将DIO和CLK管脚调换一下...

提升写作效率的秘密武器:一个资深编辑的AI写作体验

有句话说:“写作是一项你坐在打字机前流血的工作。”而如今,各类生成式软件的涌现似乎打破了写作这一古老的艺术形式壁垒。过去,作家们独自在书桌前冥思苦想,如今,一款名为“玲珑AI工具”的ai写作助手正悄然改变着文案写作行业的创作生态,成为提升写作效率的秘密武器。 在传统…...

Python sort() 和 sorted() 的区别应用实例详解

大家好&#xff0c;今天针对 Python 中 sort() 和 sorted() 之间的区别&#xff0c;来一个实例详细解读。sort — 顾名思义就是排序的意思&#xff0c;它可以接收的对象为可迭代的数据类型。今天以列表为例子演示两者的不同点、相同点&#xff0c;以及其中一些常用的高级参数使…...

七、Redis三种高级数据结构-HyperLogLog

Redis HyperLogLog是用来做基数统计的算法&#xff0c;HyperLogLog在优点是&#xff0c;在输入的元素的数量或者体积非常大时&#xff0c;计算基数占用的空间总是固定的、并且非常小。在Redis里每个HyperLogLog键只需花费12KB内存&#xff0c;就可以计算接近 264 个元素的基数。…...

2024年【金属非金属矿山(露天矿山)安全管理人员】模拟考试题库及金属非金属矿山(露天矿山)安全管理人员作业模拟考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 金属非金属矿山&#xff08;露天矿山&#xff09;安全管理人员模拟考试题库参考答案及金属非金属矿山&#xff08;露天矿山&#xff09;安全管理人员考试试题解析是安全生产模拟考试一点通题库老师及金属非金属矿山&a…...

网站DDoS攻击应对策略:全面防护与恢复指南

随着互联网的发展&#xff0c;网络安全问题日益凸显&#xff0c;其中DDoS&#xff08;分布式拒绝服务&#xff09;攻击成为了网站安全的主要威胁之一。当网站遭受DDoS攻击时&#xff0c;可能会面临服务中断、性能下降、数据泄露等严重后果。因此&#xff0c;了解并掌握DDoS攻击…...

线性/非线性最小二乘 与 牛顿/高斯牛顿/LM 原理及算法

最小二乘分为线性最小二乘和非线性最小二乘 最小二乘目标函数都是min ||f(x)||2 若f(x) ax b&#xff0c;就是线性最小二乘&#xff1b;若f(x) ax2 b / ax2 bx 之类的&#xff0c;就是非线性最小二乘&#xff1b; 1. 求解线性最小二乘 【参考】 2. 求解非线性最小二乘…...

mysqldump: Error 2013 导致mysql停止运行

https://www.cnblogs.com/DataArt/p/10173957.html 1 查询表大小 SELECT table_name AS "表名", round(((data_length index_length) / 1024 / 1024), 2) AS "大小(MB)" FROM information_schema.tables WHERE table_schema your_database_name AND …...

2023年数维杯国际大学生数学建模挑战赛D题洗衣房清洁计算解题全过程论文及程序

2023年数维杯国际大学生数学建模挑战赛 D题 洗衣房清洁计算 原题再现&#xff1a; 洗衣房清洁是人们每天都要做的事情。洗衣粉的去污作用来源于一些表面活性剂。它们可以增加水的渗透性&#xff0c;并利用分子间静电排斥机制去除污垢颗粒。由于表面活性剂分子的存在&#xff…...

python 两种colorbar 最大最小和分类的绘制

1 colorbar 按照自定义的最值绘制 归一化方法使用Normalize(vmin0, vmax40.0) import numpy as np import matplotlib as mpl import matplotlib.pyplot as plt import matplotlib.cm as cm import matplotlib.colors as mcolors from matplotlib import rcParams from matplot…...

Linux-基础IO

&#x1f30e;Linux基础IO 文章目录&#xff1a; Linux基础IO C语言中IO交互       常用C接口         fopen         fputs         fwrite         fgets 当前路径       三个文件流 系统文件IO       open函数     …...

202006青少年软件编程(Python)等级考试试卷(二级)

第 1 题 【单选题】 以下程序的运行结果是&#xff1f;&#xff08; &#xff09; l ["兰溪","金华","武义","永康","磐安","东阳","义乌","浦江"]for s in l:if"义"in s:print(…...

【LeetCode】每日一题:2244.完成所有任务需要的最少轮数

给你一个下标从 0 开始的整数数组 tasks &#xff0c;其中 tasks[i] 表示任务的难度级别。在每一轮中&#xff0c;你可以完成 2 个或者 3 个 相同难度级别 的任务。 返回完成所有任务需要的 最少 轮数&#xff0c;如果无法完成所有任务&#xff0c;返回 -1 。 英文原题&#xf…...

百度文心一言 java 支持流式输出,Springboot+ sse的demo

参考&#xff1a;GitHub - mmciel/wenxin-api-java: 百度文心一言Java库&#xff0c;支持问答和对话&#xff0c;支持流式输出和同步输出。提供SpringBoot调用样例。提供拓展能力。 1、依赖 <dependency> <groupId>com.baidu.aip</groupId> <artifactId…...

59.基于SSM实现的网上花店系统(项目 + 论文)

项目介绍 本站是一个B/S模式系统&#xff0c;网上花店是在MySQL中建立数据表保存信息&#xff0c;运用SSMVue框架和Java语言编写。并按照软件设计开发流程进行设计实现充分保证系统的稳定性。系统具有界面清晰、操作简单&#xff0c;功能齐全的特点&#xff0c;使得基于SSM的网…...

什么是字节码?

字节码&#xff08;Bytecode&#xff09;是Java虚拟机&#xff08;JVM&#xff09;能够理解和执行的中间代码。Java源代码首先编译成字节码文件&#xff08;扩展名为 .class&#xff09;&#xff0c;而不是直接编译成特定机器的机器码。字节码具有以下特点&#xff1a; 平台无…...

C++ JWT的使用

接入sdk需要使用JWT加密参数&#xff0c;做个记录以备后查 #include <iostream> #include <jwt-cpp/jwt.h> int main() { // 设置JWT的密钥&#xff08;对于HS256&#xff09; std::string secret_key "your-256-bit-secret"; // 创建一个新的JW…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...