04_Electron 模块介绍

news2024/9/25 10:40:48

Electron 模块介绍

  • 一、Electron 主进程和渲染进程中的模块(介绍)
  • 二、Electron remote 模块
  • 三、Electron 渲染进程中通过 remote 模块调用主进程中的 BrowserWindow 打开新窗口
    • 1、安装 @electron/remote
    • 2、主进程中配置启用 remote 模块
    • 3、渲染进程引入 remote 模块使用
    • 4、实现效果
  • 四、Electron 网页安全政策 Content-Security-Policy
    • 1、配置 Content-Security-Policy

一、Electron 主进程和渲染进程中的模块(介绍)

官方文档: https://www.electronjs.org/zh/docs/latest/api/app
在这里插入图片描述

二、Electron remote 模块

remote 模块提供了一种在渲染进程(网页)和主进程之间进行进程间通讯(IPC)的简便途径。
Electron 中,与 GUI 相关的模块(如 dialog, menu 等)只存在于主进程,而不在渲染进程中。为了能从渲染进程中使用它们,需要用 ipc 模块来给 主进程发送进程间消息。使用 remote 模块,可以调用主进程对象的方法,而无需显式地发送进程间消息,这类似于 java 的 RMI。
electron 14.x 以后官方把内置的 remote 挪到了第三方模块里面,下面一起看看如何在 Electron 最新版本中使用 @electron/remote 模块

三、Electron 渲染进程中通过 remote 模块调用主进程中的 BrowserWindow 打开新窗口

1、安装 @electron/remote

npm install --save @electron/remote
或者
cnpm install --save @electron/remote
或者 
yarn add @electron/remote 

2、主进程中配置启用 remote 模块

const remote = require("@electron/remote/main")
remote.initialize()
remote.enable(mainWindow.webContents)

3、渲染进程引入 remote 模块使用

const {BrowserWindow}= require("@electron/remote")

渲染进程代码:


const {BrowserWindow}= require("@electron/remote")
const path = require("path")
window.onload=()=>{
  let btnDom = document.getElementById("btn")
  btnDom.onclick = ()=>{
    const secondWindow = new BrowserWindow({
      width:300,
      height:300,
    })
    // __dirname 表示获取我们当前目录, path.join 会将两个参数合并成 d://electrondemo/index.html
    secondWindow.loadFile(path.join(__dirname, 'second.html'))
  }
 
}

4、实现效果

在这里插入图片描述

四、Electron 网页安全政策 Content-Security-Policy

详情参考: https://electronjs.org/docs/tutorial/security.
Content-Security-Policy 简称 CSP 式一种网页安全政策
CSP 的实质就是白名单制度,开发者明确告诉客户端,哪些外部资源可以加载和执行,等同于提供白名单。它的实现和执行全部由浏览器完成,开发者只需要提供配置。
CSP 大大增强了网页的安全性。攻击者即使发现了漏洞,也没法注入脚本,除非还控制了一台列入了白名单的可信主机。
通俗的讲开启 CSP 后可以让浏览器自动禁止外部注入恶意脚本,增加网站的安全性能。

加载本地文件可以不配置,加载 远程(使用loadURL方法)的话就需要配置。

1、配置 Content-Security-Policy

两种方式的规则都是一样的,default-src 代表默认规则,‘self‘ 表示限制所有的外部资源,只允许当前域名加载资源。

<meta http-equiv='Content-Security-Policy' content="default-src'self'">

一般情况下,默认规则可以包揽大多数的需求,但凡事都有例外,资源繁多的时候通常需要特殊配置,最值得关心的是 script 的安全,这至关重要,一旦被注入恶意 script ,很多安全控制就会荡然无存,可以使用 script-src 这一指令设置

 <meta http-equiv="Content-Security-Policy" content="script-src 'self'" />

例如我们要引入 google-analytics 分析浏览 可以这样设置:

 <meta http-equiv="Content-Security-Policy" content="script-src 'self'" http />

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

大模型应用开发的框架

一、大语言模型的几个框架 1、python的版本langchain LangChain英文官方地址&#xff1a;https://www.langchain.com/ LangChain中文官网&#xff1a;https://www.langchain.com.cn/ Python官方地址&#xff1a;https://python.langchain.com/en/latest/ LangChain源代码地…

使用 Seurat 处理多模态数据

文章目录 前言一、Multimodal analysis有什么用?二、代码复现1.数据的导入2.构建seurat对象,并添加RNA和protein数据3.根据其单细胞 RNA 测序&#xff08;scRNA-seq&#xff09;图谱对细胞进行聚类4.并排可视化多种模态4.1.1可视化RNA和蛋白质水平,这里检测的基因CD19在蛋白质…

【博客搭建 第二篇章】项目中怎么引入其他的 icon

一、注册账号并将图标添加到自己的项目中 1、网站地址&#xff1a;https://www.iconfont.cn/ 2、注册 iconfont 账号 3、登录 iconfont 网站中 4、添加图标到购物车中 5、添加图标到项目中 6、生成在线连接 7、复制连接 二、项目中配置连接地址 找到项目中的 them…

嵌入式初学-C语言-十九

指针的引入 为函数修改实参提供支持为动态内存管理提供支持为动态数据及结构提供支持为内存访问提供另一种途径 指针的概述 内存地址&#xff1a; 系统为了内存管理的方便将内存划分为一个个内存单元&#xff08;一个内存单元占一个字节&#xff09;&#xff0c;并为每一个…

YARN 调度器的配置与使用

YARN 调度器的配置与使用 一、启动公平调度器1.1 配置 yarn-site.xml创建 fail-scheduler.xml 文件 二、同步配置文件三、重启启动 YARN 集群四、提交作业五、运行结果 一、启动公平调度器 公平调度器的使用由属性yarn.resourcemanager.scheduler.class的设置所决定。YARN默认…

Effective Java学习笔记第27、28条原生态类型和非受检警告

目录 什么是泛型 泛型与编译器 不要轻易使用原生态类型 可以通过通配符类型来替代原生态类型 几个适合原生态类型的场景 消除非受检的警告 什么是非受检警告 如果无法消除警告 本书27-33条主要介绍泛型。首先介绍什么是泛型&#xff0c;它的应用场景是什么。然后重点介…

微信小程序项目-宠物商城项目uniapp源码和代码讲解

&#x1f939;‍♀️潜意识起点&#xff1a;个人主页 &#x1f399;座右铭&#xff1a;得之坦然&#xff0c;失之淡然。 &#x1f48e;擅长领域&#xff1a;大前端 是的&#xff0c;我需要您的&#xff1a; &#x1f9e1;点赞❤️关注&#x1f499;收藏&#x1f49b; 是我…

3D渲染优化:视锥体剔除算法

现在我们知道如何创建场景图并在场景中组织对象&#xff0c;我们将了解如何通过技术“视锥剔除”来限制 GPU 的使用。 这种技术很容易理解。你无需将所有信息发送到 GPU&#xff0c;而是对可见和不可见元素进行排序&#xff0c;并仅渲染可见元素。借助这种技术&#xff0c;你将…

Matlab|考虑充电负荷空间可调度特性的分布式电源与电动汽车充电站联合配置方法

目录 1 主要内容 目标函数 电动汽车负荷建模 算例系统图 程序亮点 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序复现博士文章《互动环境下分布式电源与电动汽车充电站的优化配置方法研究》第四章《考虑充电负荷空间可调度特性的分布式电源与电动汽车充电站联合…

Baklib:强大的知识库创建工具

Baklib&#xff1a;强大的知识库创建工具 在信息管理和知识分享的数字化时代&#xff0c;Baklib 作为一款功能强大的知识库创建工具&#xff0c;为用户提供了全面的解决方案。本文将介绍 Baklib 的基本信息、特点&#xff0c;以及如何快速部署和使用。 软件简介 Baklib 是一款…

第二十节、有限状态机和抽象类多态

一、抽象类 挂载到动画器上的就是继承抽象类代码 1、使用onenable周期函数启用 2、在每一个周期函数中对抽象类进行调用 3、隐藏公开的变量

[Python学习日记-4] Python中的变量

[Python学习日记-4] Python中的变量 简介 变量的运行原理 变量的使用规则 简介 在Python中&#xff0c;变量是一个具有名称的存储位置&#xff0c;用于存储数据。它们被用来在程序中引用和操作数据。变量在使用前需要先进行声明或赋值&#xff0c;Python是一种动态类型语言&…

Linux应用层开发(7):网络编程

互联网对人类社会产生的巨大变革&#xff0c;大家是有目共睹的&#xff0c;它几乎改变了人类生活的方方面面。互联网通信的本质是数字通信&#xff0c;任何数字通信都离不开通信协议的制定&#xff0c;通信设备只有按照约定的、统一的方式去封装和解析信息&#xff0c;才能实现…

043字符串相乘

题意 给定两个以字符串形式表示的非负整数 num1 和 num2&#xff0c;返回 num1 和 num2 的乘积&#xff0c;它们的乘积也表示为字符串形式。 注意&#xff1a;不能使用任何内置的 BigInteger 库或直接将输入转换为整数。 1 < num1.length, num2.length < 200 难度 中…

Python Dash 一个可以玩转AI的可视化利器

很多人提到Tableau、Power BI等老牌可视化工具&#xff0c;这些工具确实引领了可视化的风潮&#xff0c;有开疆拓土之功。 但这次我要提名一个有黑马潜质的可视化工具-Dash&#xff0c;在某些地方比Tableau、PowerBI更胜一筹。 Dash是一个基于web的Python工具包&#xff0c;所…

[io]进程间通信 -信号函数 —信号处理过程

sighandler_t signal(int signum, sighandler_t handler); 功能&#xff1a; 信号处理函数 参数&#xff1a; signum&#xff1a;要处理的信号 handler&#xff1a;信号处理方式 SIG_IGN&#xff1a;忽略信号 SIG_DFL&#xff1a;执行默认操作 handler&#xff1a;捕捉信 …

mysql数据存储问题

目录 MySQL数据存储基础 MySQL数据存放位置 InnoDB存储引擎介绍 Mermaid图表&#xff1a;InnoDB存储引擎数据文件结构 表空间结构详解 组成要素 组织方式 页内组织 性能影响 Mermaid图表&#xff1a;表空间的层次化结构和页内组织 InnoDB行格式详解 行格式类型 Co…

Linux 操作系统:基于环形队列的生产者消费者模型

Linux 操作系统&#xff1a;基于环形队列的生产者消费者模型 一、前言二、大致框架二、P操作、V操作三、生产者生产数据四、生产者获取数据五、代码测试六、所有代码 一、前言 环形队列采用数组模拟&#xff0c;用模运算来模拟环状特性。和基于阻塞队列的生产者消费者模型不同的…

WPF篇(11)-ToolTip控件(提示工具)+Popup弹出窗口

ToolTip控件 ToolTip控件继承于ContentControl&#xff0c;它不能有逻辑或视觉父级&#xff0c;意思是说它不能以控件的形式实例化&#xff0c;它必须依附于某个控件。因为它的功能被设计成提示信息&#xff0c;当鼠标移动到某个控件上方时&#xff0c;悬停一会儿&#xff0c;…

【云存储】SDS软件定义存储,数据存储的类型与技术方案(块/文件/对象,Ceph、RBD等)

【云存储】SDS软件定义存储&#xff0c;数据存储的类型与技术方案&#xff08;块/文件/对象&#xff0c;Ceph、RBD等&#xff09; 文章目录 1、分布式存储架构&#xff08;软件定义存储SDS&#xff0c;超融合基础架构HCI&#xff09;2、存储类型&#xff08;块存储&#xff0c;…