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-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.mzph.cn/bicheng/10027.shtml

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

相关文章

每天一个数据分析题（三百二十）业务描述性分析

每天一个数据分析题（三百二十）业务描述性分析

在业务描述性分析中使用的可视化图表中可以快速确认数据的分布以及数据分中位数、四分位数的图表的是 A. 气泡图 B. 散点图 C. 盒须图 D. 折线图 数据分析认证考试介绍&#xff1a;点击进入 题目来源于CDA模拟题库 点击此处获取答案
阅读更多...
微信小程序原生组件使用

微信小程序原生组件使用

1、video组件使用 <view class"live-video"><video id"myVideo" src"{{videoSrc}}" bindplay"onPlay" bindfullscreenchange"fullScreenChange" controls object- fit"contain"> </video&g…
阅读更多...
【Vue】ElementUI下拉多选框OnChange事件，保存的id数组和对象数组的关系

【Vue】ElementUI下拉多选框OnChange事件，保存的id数组和对象数组的关系

ElementUI下拉多选框OnChange事件&#xff0c;保存的id数组和对象数组的关系 简述&#xff1a;下拉多选框保存的是id数组&#xff0c;而实际上传给后端的是对象数组&#xff0c;这种时候的OnChange方法代码如下 简述&#xff1a;下拉多选框保存的是id数组&#xff0c;而实际上传…
阅读更多...
Spring Cloud LoadBalancer 4.1.2

Spring Cloud LoadBalancer 4.1.2

LoadBalancer位于Spring Cloud Commons 模块 Spring Cloud 提供了自己的客户端负载均衡器抽象和实现。对于负载均衡机制&#xff0c;添加了 ReactiveLoadBalancer 接口&#xff0c;并为其提供了基于Round-Robin和Random的实现。为了让实例从反应式中进行选择&#xff0c;使用了…
阅读更多...
ubuntu server 22.04 安装docker、docker-compose

ubuntu server 22.04 安装docker、docker-compose

ubuntu server 22.04安装docker有两种方式&#xff0c;第一种是使用ubuntu镜像源的软件包进行安装&#xff0c;第二种使用官方GPG密钥手动添加Docker存储库方式进行安装&#xff0c;两种方式都可以&#xff0c;但第二种方式略复杂&#xff0c;这里介绍第一种比较简单的安装方式…
阅读更多...
轻松玩转Python文件操作：移动、删除

轻松玩转Python文件操作：移动、删除

哈喽&#xff0c;大家好&#xff0c;我是木头左&#xff01; Python文件操作基础 在处理计算机文件时&#xff0c;经常需要执行如移动和删除等基本操作。Python提供了一些内置的库来帮助完成这些任务&#xff0c;其中最常用的就是os模块和shutil模块。这两个模块包含了许多与文…
阅读更多...
无需公网IP、无需云服务器，异地组网实现远程直连NAS、游戏联机

无需公网IP、无需云服务器，异地组网实现远程直连NAS、游戏联机

手机图片、视频太多&#xff0c;存储空间不够用怎么办?出门在外无法直连家中NAS&#xff0c;远程访问NAS速度慢&#xff1f;自建私有云、多媒体服务器&#xff0c;如何多人远程共享媒体资源&#xff1f;幻兽帕鲁、我的世界、泰拉瑞亚…局域网游戏&#xff0c;想远程多人联机&a…
阅读更多...
Chromium 调试指南2024 Windows11篇-VSCode必要依赖扩展（四）

Chromium 调试指南2024 Windows11篇-VSCode必要依赖扩展（四）

1. 前言 为了在Visual Studio Code中更加方便地进行Chromium项目的开发和调试&#xff0c;我们需要安装一些必要的依赖扩展。本文将介绍如何安装中文语言包及其他依赖扩展&#xff0c;以提升我们在Visual Studio Code中的开发效率和使用体验。 2. 安装依赖扩展 在打开的Visu…
阅读更多...
局域网手机端远程控制手机

局域网手机端远程控制手机

局域网手机端远程控制手机 随着科技的进步和智能设备的普及&#xff0c;远程控制技术在日常生活与工作中的应用越来越广泛。其中&#xff0c;局域网内的手机端远程控制手机技术&#xff0c;因其便捷性和实用性&#xff0c;受到了众多用户的关注。本文将简要介绍该技术及其应用…
阅读更多...
MySql开源闪回工具MyFlash —— 筑梦之路

MySql开源闪回工具MyFlash —— 筑梦之路

github官网&#xff1a;https://github.com/Meituan-Dianping/MyFlash 简介 MyFlash是由美团点评公司技术工程部开发维护的一个回滚DML操作的工具。该工具通过解析v4版本的binlog&#xff0c;完成回滚操作。相对已有的回滚工具&#xff0c;其增加了更多的过滤选项&#xff0c…
阅读更多...
在装有centOS7的虚拟机上进行MySQL的安装部署

在装有centOS7的虚拟机上进行MySQL的安装部署

1.MySQL数据库介绍 1.开源的&#xff0c;跨平台的&#xff0c;社区版免费 2.支持多种存储引擎 3.支持多种主从复制 MySQL版本&#xff1a;5.6 5.7 8.0 https://www.mysql.com MySQL官网 2.安装MySQL5.7 1.配置MySQL仓库 2.安装MySQL服务端软件 3.启动MySQL服务 s…
阅读更多...
LeetCode 题目 117：填充每个节点的下一个右侧节点指针 II

LeetCode 题目 117：填充每个节点的下一个右侧节点指针 II

作者介绍&#xff1a;10年大厂数据\经营分析经验&#xff0c;现任字节跳动数据部门负责人。 会一些的技术&#xff1a;数据分析、算法、SQL、大数据相关、python&#xff0c;欢迎探讨交流 欢迎加入社区&#xff1a;码上找工作 作者专栏每日更新&#xff1a; LeetCode解锁1000题…
阅读更多...
7-Zip介绍：一个强大的开源压缩工具

7-Zip介绍：一个强大的开源压缩工具

介绍 7-Zip 是一个开源的文件压缩和解压缩工具&#xff0c;具有高压缩比和快速解压的特点。它支持多种压缩格式&#xff0c;包括 7z、ZIP、RAR、GZIP、TAR 等&#xff0c;是一个功能丰富、易于使用的压缩工具。本文将介绍7-Zip的特点、优缺点以及其在实际应用中的作用。 特点…
阅读更多...
3. 多层感知机算法和异或门的 Python 实现

3. 多层感知机算法和异或门的 Python 实现

前面介绍过感知机算法和一些简单的 Python 实践&#xff0c;这些都是单层实现&#xff0c;感知机还可以通过叠加层来构建多层感知机。 2. 感知机算法和简单 Python 实现-CSDN博客 1. 多层感知机介绍 单层感知机只能表示线性空间&#xff0c;多层感知机就可以表示非线性空间。…
阅读更多...
Ubuntu20.04 设置路由器

Ubuntu20.04 设置路由器

1. 网络拓扑图 2. 查看网卡信息 ip a得出如下网卡信息&#xff0c;enp1s0和enp2s0为两个网卡名称&#xff0c;以及相关两个网卡的详细信息&#xff0c;不同设备的网卡名称可能不一样 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group defaul…
阅读更多...
使用python获取一下microsoft的搜索积分

使用python获取一下microsoft的搜索积分

主要使用的库是pyautogui PyAutoGUI接管了鼠标、键盘使用权，基本上完全照搬人的操作; 主要步骤如下: 登录edge浏览器打开搜索页面 找到搜索框的位置坐标使用pyautogui模拟点击搜索框模拟输入搜索文字模拟点击键盘enter键重复以上动作伪代码如下： import pyautogui import ti…
阅读更多...
图像处理中的方向梯度直方图纹理特征提取方法

图像处理中的方向梯度直方图纹理特征提取方法

方向梯度直方图&#xff08;Histogram of Oriented Gradients&#xff0c;HOG&#xff09;是一种常用的用于图像纹理特征提取的方法。HOG算法通过计算图像中各个局部区域的梯度方向和强度&#xff0c;然后构建一个直方图来描述图像的纹理特征。 以下是使用方向梯度直方图进行纹…
阅读更多...
WM Transaction Code 仓库管理模块事务代码大全

WM Transaction Code 仓库管理模块事务代码大全

1.1 LE-WM 仓库管理 Warehouse Management 仓库管理事务码 描述 LB01 Create Transfer Requirement 创建转储需求 LB02 Change transfer requirement 修改转储需求 LB03 Display Transfer Requirement 显示转储需求 LB10 TRs for Storage Type 按仓储类型的转储请求 …
阅读更多...
推荐4个可用的github国内镜像

推荐4个可用的github国内镜像

Github是全球最大的代码托管云平台&#xff0c;超过1亿用户在平台上分享代码及数据&#xff0c;深受生物信息学软件开发者的喜爱&#xff0c;并且现在发表文章&#xff0c;若涉及到代码&#xff0c;编辑还要求我们把代码及数据存放在github上&#xff0c;以便检查数据的真实性和…
阅读更多...
商务通设置对话永远在迷你小窗口对话

商务通设置对话永远在迷你小窗口对话

系统设置--参数设置--PC对话窗口--迷你对话窗口-- 点击浮动图标或接受邀请时在当前页面弹出迷你对话窗口
阅读更多...
最新文章

Copyright @ 2022~2023