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"
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/697289.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

kali更新镜像源

kali更新镜像源

1. 什么是镜像源 镜像源一种数据存储和分发技术&#xff0c;通常指的是一个服务器或网站&#xff0c;它存储了另一个服务器或网站上的某些或全部内容的副本。 2. kali更新镜像源 1. 编辑镜像源文件 vi /etc/apt/sources.list 2. 将原来的镜像源用#号注释掉 3. 选择镜像源地址…
阅读更多...
Ubuntu+Vscode使用Clangd进行项目代码跳转

Ubuntu+Vscode使用Clangd进行项目代码跳转

文章目录 1. 环境介绍2. bear工具安装3. Clangd插件安装4. Clangd配置4.1方法一&#xff1a;扩展设置4.2 方法二&#xff1a;settings.json配置 5. Clangd常用配置参数介绍6. 总结 1. 环境介绍 Linux环境 笔者使用Ubuntu22.04.3 本文章以Windows下的Vscodessh到Ubuntu主机为例…
阅读更多...
2023年数维杯国际大学生数学建模挑战赛B题棉花秸秆热解的催化反应解题全过程论文及程序

2023年数维杯国际大学生数学建模挑战赛B题棉花秸秆热解的催化反应解题全过程论文及程序

2023年数维杯国际大学生数学建模挑战赛 B题 棉花秸秆热解的催化反应 原题再现&#xff1a; 随着全球对可再生能源需求的不断增加&#xff0c;生物质能作为一种成熟的可再生能源得到了广泛的关注。棉秆作为一种农业废弃物&#xff0c;由于其富含纤维素、木质素等生物质成分&am…
阅读更多...
Docker安装、使用及常用命令

Docker安装、使用及常用命令

一、Docker是什么&#xff1f; Docker是一种开源的容器化技术&#xff0c;允许开发者将应用及其运行环境打包在一个轻量级、可移植的容器中。这样&#xff0c;不论在开发、测试还是生产环境中&#xff0c;应用都能在任何Docker支持的平台上无缝运行。Docker使用Dockerfile来自…
阅读更多...
【鸿蒙开发】第二十四章 IPC与RPC进程间通讯服务

【鸿蒙开发】第二十四章 IPC与RPC进程间通讯服务

1 IPC与RPC通信概述 IPC&#xff08;Inter-Process Communication&#xff09;与RPC&#xff08;Remote Procedure Call&#xff09;用于实现跨进程通信&#xff0c;不同的是前者使用Binder驱动&#xff0c;用于设备内的跨进程通信&#xff0c;后者使用软总线驱动&#xff0c;…
阅读更多...
Python语言基础与由来介绍【自我维护版】

Python语言基础与由来介绍【自我维护版】

各位大佬好 &#xff0c;这里是阿川的博客 &#xff0c; 祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 本篇博客是在已有的博客的基础上进行的维护。 目录…
阅读更多...
Spring框架深度解析：打造你的Java应用梦工厂

Spring框架深度解析：打造你的Java应用梦工厂

想要在Java企业级应用开发中大展身手&#xff1f;Spring框架的核心容器是你不可或缺的伙伴&#xff01; 文章目录 一. 引言1.1 介绍Spring框架的重要性1.2 阐述核心容器在Spring框架中的作用1.3 故事开端 二. 背景介绍2.1 描述Spring框架的发展历程2.2 概述Spring框架的主要特点…
阅读更多...
Scala、Spark SQL 常用方法

Scala、Spark SQL 常用方法

目录 数组常用方法 列表操作常用方法 Scala中常用的查看列表元素的方法有head、init、last、tail和take()。 合并两个列表还可以使用concat()方法。 集合操作常用方法 map()方法 foreach()方法 filter()方法 flatten()方法 groupBy()方法 ​编辑 从内存中读取数据创建…
阅读更多...
立聪堂助听器29周年暨第九届助听使者活动圆满落幕

立聪堂助听器29周年暨第九届助听使者活动圆满落幕

5月10日对于立聪堂来说是个特别的日子&#xff0c;这家专注于听力健康领域的公司迎来了29周年。同时&#xff0c;立聪堂第九届助听使者代表及其家人也受邀参观立聪堂南京总部&#xff0c;共庆29周年。 易被忽视的老人听力健康 大数据显示&#xff0c;我国65岁以上老人&#x…
阅读更多...
如何查看centos7中Java在哪些路径下

如何查看centos7中Java在哪些路径下

在 CentOS 7 上&#xff0c;你可以通过几种方式查找安装的 Java 版本及其路径。以下是一些常用的方法&#xff1a; 1. 使用 alternatives 命令 CentOS 使用 alternatives 系统来管理同一命令的多个版本。你可以使用以下命令来查看系统上所有 Java 安装的配置&#xff1a; su…
阅读更多...
力扣75. 颜色分类

力扣75. 颜色分类

Problem: 75. 颜色分类 文章目录 题目描述思路及解法复杂度Code 题目描述 思路及解法 由于题目只提供0&#xff0c;1&#xff0c;2分别代表颜色红、白、蓝&#xff0c;并按此排序&#xff0c;那么我们可以遍历两次数组&#xff0c;第一次将0&#xff0c;全部放到数组前面一部分…
阅读更多...
【电路笔记】-无源带通滤波器

【电路笔记】-无源带通滤波器

无源带通滤波器 文章目录 无源带通滤波器1、概述2、二阶带通滤波器的频率响应3、带通滤波器示例4、总结无源带通滤波器可以通过将低通滤波器与高通滤波器连接在一起制成。 1、概述 无源带通滤波器可用于隔离或滤除特定频带或频率范围内的某些频率。 简单 RC 无源滤波器中的截止…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023