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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

IDEA 好用的插件

IDEA 好用的插件

图标插件&#xff1a;Atom Material Icons 此插件的作用就是更好的显示各种文件的类别&#xff0c;使之一目了然 汉化包 Chinese ​(Simplified)​ Language Pack / 中文语言包 作用就是 汉化 AI编码助手 GitHub Copilot AI编码助手&#xff1a;提示代码很好用 缺点&#xff1a…
阅读更多...
H5 云商城 file.php 文件上传致RCE漏洞复现

H5 云商城 file.php 文件上传致RCE漏洞复现

0x01 产品简介 H5 云商城是一个基于 H5 技术的电子商务平台，旨在为用户提供方便快捷的在线购物体验。多平台适配：H5 云商城采用 H5 技术开发，具有良好的跨平台适配性。无论是在电脑、手机还是平板等设备上，用户都可以通过网页浏览器访问和使用云商城，无需安装额外的应用程…
阅读更多...
CH340 RTS DTR引脚编程驱动OLED

CH340 RTS DTR引脚编程驱动OLED

运行结果 硬件连接&#xff08;在连接线上串接300R电阻&#xff09; 下面是c#实现代码 using System; using System.Collections.Generic; using System.Linq; using System.Security.Cryptography; using System.Text; using System.Threading.Tasks;using uint8 System.Byt…
阅读更多...
2024年数维杯B题完整代码和思路论文讲解与分析

2024年数维杯B题完整代码和思路论文讲解与分析

2024数维杯数学建模完整代码和成品论文已更新&#xff0c;获取↓↓↓↓↓ https://www.yuque.com/u42168770/qv6z0d/bgic2nbxs2h41pvt?singleDoc# 2024数维杯数学建模B题45页论文和代码已完成&#xff0c;代码为全部问题的代码 论文包括摘要、问题重述、问题分析、模型假设、…
阅读更多...
QT--2

QT--2

Qt界面设计 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent) {//窗口相关设置this->resize(680,520);this->setFixedSize(680,520);this->setWindowTitle("Tim");this->setWindowFla…
阅读更多...
【零基础】system generator①设置卡解析

【零基础】system generator①设置卡解析

1.在matlab中我们输入的是双精度浮点型数据&#xff0c;经过gateway后变成定点型。十六位十四个小数位&#xff0c;整个数据有十六位&#xff0c;其中十四位给了小数 2.fixed-point定点型&#xff1b;signed有符号&#xff1b;2’s comp补码 3.量化误差 truncate&#xff0c;舍…
阅读更多...
Windows Server 2012 R2 新增D盘分区

Windows Server 2012 R2 新增D盘分区

我们经常搭建windows版本的游戏时会要在D盘上操作&#xff0c;今天就介绍下新的服务器如何新增一个D盘。 在"开始"图标右边有个”服务器管理器“&#xff0c;单击点开 点开服务器管理器后&#xff0c;点击“工具”打开“计算机管理” 打开计算机管理后点击“存储”-…
阅读更多...
【c++】string深度刨析以及实现

【c++】string深度刨析以及实现

#pragma once #include<iostream> using namespace std; #include<assert.h> namespace bite {class string{public://迭代器 //像指针 底层不一定是指针 typedef char* iterator;iterator begin(){return _str;}iterator end(){return _str _size;}//const 版本…
阅读更多...
RERCS系统-WDA+BOPF框架实战例子 PART 2-新建Root的子节点Node Element

RERCS系统-WDA+BOPF框架实战例子 PART 2-新建Root的子节点Node Element

1、通过事务码 BOBF进入Business Object Browser&#xff08;业务对象浏览&#xff09;页面&#xff1b; 2、输入debug 进入编辑模式&#xff1b; 3、双击对应的业务对象进入Business Object Detail Browser即业务对象数据浏览器 在Node Structure的Root中新建需要的SubNode子…
阅读更多...
OpenCV使用 Kinect 和其他兼容 OpenNI 的深度传感器(75)

OpenCV使用 Kinect 和其他兼容 OpenNI 的深度传感器(75)

返回:OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 上一篇:使用 OpenCV 创建视频(74) 下一篇 :OpenCV使用 Orbbec Astra 3D 相机(76) 目的&#xff1a;​ 通过 VideoCapture 类支持与 OpenNI 兼容的深度传感器&#xff08;Kinect、XtionPRO 等&#xff09;。…
阅读更多...
力扣HOT100 - 215. 数组中第K个最大元素

力扣HOT100 - 215. 数组中第K个最大元素

解题思路&#xff1a; 快速选择&#xff0c;目标是找出数组中第 k 小&#xff08;或第 k 大&#xff09;的元素&#xff0c;而不是对整个数组进行排序。 &#xff08;需要和快排进行区分&#xff0c;快排的目的是排序&#xff09; 注意&#xff1a; i l - 1, j r 1; 为什…
阅读更多...
leetcode刷题指南

leetcode刷题指南

本文我将分享给大家一套我自己使用良久并觉得非常高效的 学习论&#xff0c;它可以运用到 Leetcode 上的刷题&#xff0c;也可以 generalize 到生活中涉及到学习以及记忆的方方面面。当然&#xff0c;本文将以 Leetcode 刷题为 case study 去进行讲解。 更具体一点, 我会教大家…
阅读更多...
鸿蒙OpenHarmony开发板解析：【系统能力配置规则】

鸿蒙OpenHarmony开发板解析：【系统能力配置规则】

如何按需配置部件的系统能力 SysCap&#xff08;SystemCapability&#xff0c;系统能力&#xff09;是部件向开发者提供的接口的集合。 开发前请熟悉鸿蒙开发指导文档&#xff1a;gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。 部件配置系统…
阅读更多...
Received Signals.SIGHUP death signal, shutting down workers

Received Signals.SIGHUP death signal, shutting down workers

单机多卡训练大模型的时候&#xff0c;突然报错&#xff1a; 3%|▎ | 146/4992 [2:08:21<72:57:12, 54.20s/it][2024-05-10 13:27:11,479] torch.distributed.elastic.agent.server.api: [WARNING] Received Signals.SIGHUP death signal, shutting down workers [2…
阅读更多...
Java转Kotlin调用JNI方法异常

Java转Kotlin调用JNI方法异常

一、背景 Java调用JNI方法时没有任何问题&#xff0c;但是使用Java转Kotlin以后出现了崩溃异常&#xff1a;A java_vm_ext.cc:597] JNI DETECTED ERROR IN APPLICATION: jclass has wrong type: 校验参数后没有任何变化&#xff0c;经过分析验证找到解决方案 二、原因…
阅读更多...
Java入门基础学习笔记16——运算符

Java入门基础学习笔记16——运算符

package cn.ensource.operator;public class OperatorDemo1 {public static void main(String[] args) {// 目标&#xff1a;掌握基本的算术运算符的使用int a 10;int b 2;System.out.println(a b);System.out.println(a - b);System.out.println(a * b); // 20System.out.…
阅读更多...
4步快速配置Java、MySQL、Maven环境（windows）

4步快速配置Java、MySQL、Maven环境（windows）

每次入职一家新公司或者用一台其他的临时电脑或者新电脑时都要重新配置Java开发环境&#xff0c;很麻烦&#xff0c;因此我在这里记录一下快速配置环境的方式&#xff0c;四步搞定&#xff01;此处以win为操作系统进行讲解。 第一步&#xff1a;下载链接 下载链接&#xff1a…
阅读更多...
【半夜学习MySQL】数据库中的数据类型（含数值类型、文本二进制类型、时间类型、String类型详谈）

【半夜学习MySQL】数据库中的数据类型（含数值类型、文本二进制类型、时间类型、String类型详谈）

&#x1f3e0;关于专栏&#xff1a;半夜学习MySQL专栏用于记录MySQL数据相关内容。 &#x1f3af;每天努力一点点&#xff0c;技术变化看得见 文章目录 数据类型分类数值类型bit类型tinyint类型int类型float类型decimal类型 文本、二进制类型char类型varchar类型 时间类型Strin…
阅读更多...
51单片机入门：串口通信

51单片机入门：串口通信

串行通信的初步认识 通信方式分类 1、按照数据传送方式&#xff1a; 并行通信&#xff1a;通信时数据的各个位同时传送&#xff0c;可以实现字节为单位的通信。 但是通信线多&#xff0c;占用资源多&#xff0c;成本高。 串行通信&#xff1a;一次只能发送一位&#xff0c…
阅读更多...
机器学习-Numpy

机器学习-Numpy

机器学习-Numpy 如果一个人拒绝提高自己的思想觉悟&#xff0c;那么他只能处在弱小、可怜、凄惨的境地。 目录 机器学习-Numpy 1.Numpy&#xff1a;生成矩阵 做矩阵运算 1&#xff09;创建矩阵 ①使用列表创建 ②使用元组创建 2&#xff09;矩阵取值 3&#xff09;numpy…
阅读更多...
最新文章

Copyright @ 2022~2023