当前位置: 首页 > 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…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

Android写一个捕获全局异常的工具类

项目开发和实际运行过程中难免会遇到异常发生&#xff0c;系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler&#xff0c;它是Thread的子类&#xff08;就是package java.lang;里线程的Thread&#xff09;。本文将利用它将设备信息、报错信息以及错误的发生时间都…...

​​企业大模型服务合规指南:深度解析备案与登记制度​​

伴随AI技术的爆炸式发展&#xff0c;尤其是大模型&#xff08;LLM&#xff09;在各行各业的深度应用和整合&#xff0c;企业利用AI技术提升效率、创新服务的步伐不断加快。无论是像DeepSeek这样的前沿技术提供者&#xff0c;还是积极拥抱AI转型的传统企业&#xff0c;在面向公众…...