Electron 中实现多窗口间的通信方式

最新推荐文章于 2025-09-13 21:12:06 发布

ReElixir

最新推荐文章于 2025-09-13 21:12:06 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： electron javascript 前端信息与通信

本文链接：https://blog.youkuaiyun.com/ReElixir/article/details/133116414

信息与通信专栏收录该内容

113 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了在 Electron 应用中实现多窗口通信的两种方法：一是利用 IPC 机制，通过主进程和渲染进程互相发送消息；二是通过共享文件实现窗口间的数据共享。示例代码详细展示了如何在不同窗口之间发送和接收消息。

Electron 是一个用于构建跨平台桌面应用程序的开源框架，它基于 Chromium 和 Node.js。在 Electron 应用程序中，可能需要多个窗口之间进行通信，以实现数据共享和交互。本文将介绍一些在 Electron 中实现多窗口间通信的常用方式，并提供相应的源代码示例。

使用主进程和渲染进程之间的 IPC 通信

Electron 应用程序由主进程和一个或多个渲染进程组成。主进程负责管理窗口和应用程序的生命周期，而渲染进程则负责呈现窗口的内容。通过 Electron 的 IPC (Inter-Process Communication) 机制，主进程和渲染进程可以相互发送消息和数据。

在主进程中，可以使用 ipcMain 模块监听来自渲染进程的事件，并通过 event.sender.send 方法向渲染进程发送消息。在渲染进程中，可以使用 ipcRenderer 模块发送消息给主进程，并通过监听 ipcRenderer.on 事件接收主进程发送的消息。

下面是一个简单的示例，演示了通过 IPC 在两个窗口之间发送和接收消息：

在主进程的代码（main.js）中：

const {
   
    app, BrowserW

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ReElixir

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

Electron中实现多窗口之间的通信方式

AxCybersecurity的博客

09-19

732

我们可以使用ipcMain和ipcRenderer模块进行主进程和渲染进程之间的通信，也可以利用WebContents对象在窗口之间发送消息，还可以使用全局快捷键通过主进程进行消息转发。在开发Electron应用程序时，经常会涉及到多窗口之间的通信问题，本文将介绍几种常见的实现多窗口通信的方式，并提供相应的源代码示例。我们可以将不同的快捷键绑定到不同的窗口，并通过检测快捷键的触发来实现窗口之间的通信。在主进程中，我们可以使用ipcMain模块监听来自渲染进程的事件，并在接收到事件时执行相应的操作。

分享electron多窗口实践

一群专业码农的笔记本

10-24

2057

在当今的软件开发领域，Electron框架以其独特的能力脱颖而出，它允许开发者使用Web技术构建跨平台的桌面应用程序。随着Electron应用的复杂性增加，多窗口管理和窗口间通信的需求也日益增长。本文将深入探讨如何在Electron中创建和管理多个窗口，并实现它们之间的有效通信。我们将从基础概念出发，逐步深入到实际代码实现，确保您能够理解并应用这些技术，以构建更加丰富和互动的桌面应用体验。让我们开始这段技术探索之旅，揭开Electron多窗口应用开发的神秘面纱。

参与评论您还未登录，请先登录后发表或查看评论

解决Electron多窗口通信难题：基于electron-egg的3种实战方案

gitblog_01406的博客

08-08

819

当你开发包含多窗口的Electron应用时，是否遇到过这些痛点： - 登录窗口的用户信息无法同步到主窗口 - 子窗口的操作状态无法实时反馈给父窗口 - 多窗口间数据共享导致的内存泄漏 - 复杂状态同步引发的"数据孤岛"问题作为基于Electron的企业级桌面应用开发框架，electron-egg提供了优雅的跨窗口通信解决方案。本文将系统讲解三种通信模式的实现细节，帮助你彻底解决多窗口数据同步难...

Electron多窗口通信，自动更新的问题

最新发布

chaoxxggg的博客

09-13

1071

好的，这是一个关于 Electron 多窗口管理、通信以及软件自动更新的详细讲解。我们将问题分解为三个部分来回答。

Electron之单例+多窗口

2ker的博客

09-07

2175

单例可以通过app.requestSingleInstanceLock实现，多窗口可以简单通过路由来实现。

electron实现窗口之间的通信

Luo_LA的博客

04-04

2304

在使用electron-vue开发桌面端应用时，新建了一个窗口，希望主窗口的值能够在新窗口中进行使用，即涉及到了窗口之间的值的传递。

electron 多窗口通信

latinhui的博客

03-11

1202

主进程位置 /src/main/index.js 模块 import { app, BrowserWindow ,ipcMain } from 'electron' 监听 console.log('receive render process msg') console.log(JSON.stringify(message)) // 主进程向渲染进程触发事件 mainWindow.webContents.send('c2', message) }) 渲染进程位置所有用到icpRe

Electron+Vue多页面多入口应用，窗口间传输大数据的最优方式sharedWorker

sinat_40408885的博客

05-28

1966

Electron+Vue多页面多入口应用，窗口间传输大数据，避开主进程中转，避开JSON.parse(JSON.stringify())转换的最高效方式sharedWorker

electron窗口管理封装和页面通讯

weixin_47017648的博客

08-08

537

本文介绍了Electron多窗口应用的管理方案，通过封装WinTools工具类实现窗口的统一管理。主要内容包括：1.封装窗口创建、显示/隐藏、最大化/最小化等操作的API；2.实现主进程与渲染进程间的IPC通信机制；3.主进程初始化配置，包括主窗口创建、托盘菜单、开机自启动等功能；4.通过preload脚本安全暴露API给渲染进程，避免直接访问Node.js带来的安全隐患。该方案解决了Electron多窗口应用中窗口管理混乱、通信复杂等问题，提高了代码的模块化和可维护性。

Electron + Vite + Vue 多窗口管理实战指南

farme_guan的博客

05-20

840

electron打开多个窗口来分离模块、提升用户体验

如何在centOS下查看后台运行进程、结束进程

知行合一

09-11

6074

1、进程后台运行：nohup 代码& 代码是要运行的命令 nohup 代码& 例如：运行一个名字叫fullbook_2_4.jar的jar包，这样打就可以了 nohup java -jar fullbook_2_4.jar& 2、查看进程 ps -ef 可以查看所有进程 3、结束进程 kill -pid 通过查看进程发现上面运行的jar包的pid是21558，就可以这样结束它 kill 21550 ...

electron-window-manager:管理多个电子窗口，消息传输和同步状态

05-23

电子窗口管理器管理多个电子窗口，消息传输和同步状态。在"electron": "^10.3.0"测试"electron": "^10.3.0" 特征创建自定义窗口使用preload.js ，您可以在nodeIntegration: false渲染过程中最大化，最小化，切换或调用任何窗口方法nodeIntegration: false Windows之间的邮件传输 Windows之间的状态同步用法该项目中有演示和示例： 1.安装 npm i @canwdev/electron-window-manager # Or yarn add @canwdev/electron-window-manager 2.设置preload.js 将我们的preload.js导入electron-api.js // src/utils/electron-api.js const wmPre

32、python多进程编程代码演示

zhaopeng01zp的博客

10-27

517

print("Test Process") # 导入进程模块 from multiprocessing import Process import time, os # 创建进程进程入口函数进程参数（是个元组类型） def proc_func(name): print("proc_func") for j in range(10): # 打印进程号 print(j, "child func", name, os.getpid()) tim

electron 两个窗口如何通信_javascript – 在Electron中的两个渲染器进程之间进行通信...

weixin_39684967的博客

12-20

343

我正在写一个Eletron节目.在程序中有一个索引窗口,由主进程(main.js)创建.在此窗口中有一个文件列表(图像).当我单击该列表中的一个文件时,我想启动第二个显示该文件的窗口.第二个窗口由索引窗口(index.js)的渲染器进程启动.如何在索引窗口的渲染器进程和第二个窗口的渲染器进程之间进行通信？码：从main.js中的主进程创建索引窗口：let win;function createWi...

electron 两个窗口如何通信_聊聊 electron 中实现多窗口之间的通信方式

weixin_39790877的博客

12-20

4750

前言由于自己在使用electron开发一个类似微信的桌面客户端App，开发这个App的目的纯粹是为了总结一下自己对于 electron 的积累总结吧，先贴出项目的源码地址：github.com/1111mp/elec…。目前整个项目的基础架构都实现差不多了，包括整个应用的数据持久化(使用的是 sqlite，因为我比较喜欢用 sequelize)、多语言、主题设置、多窗口之间的通信方式和带...

electron两个渲染窗口(进程)中通信：

jun999

11-30

1387

electron 渲染进程(窗口)之间通信

electron 两个窗口如何通信_Electron 进程间通讯

weixin_39598308的博客

01-26

785

Electron 进程间通讯运行机制：主进程处理原生应用逻辑main脚本的进程被称为主进程，一个Electron应用总是有且只有一个主进程职责创建渲染进程(可多个)控制应用生命周期 (启动、退出app以及对app的一些事件监听)调用系统底层功能、调用原生资源可调用接口NodeJS apiElectron提供的主进程api(包括一些系统功能和Electron附加功能)渲染进程负责页面渲染由于Elec...

Electron 多窗口管理：从基础到高级实践

vvilkin的学习备忘

06-30

1588

在现代桌面应用开发中，多窗口管理是一个常见而重要的需求。无论是 IDE、聊天工具还是复杂的业务系统，良好的多窗口体验都能显著提升用户的工作效率。Electron 作为最流行的跨平台桌面应用开发框架，提供了强大的多窗口管理能力。本文将全面探讨 Electron 中的多窗口管理技术，从基础创建到高级管理策略，帮助开发者构建专业级的桌面应用。

electron 两个窗口如何通信_Electron中页面之间的通信

weixin_39637700的博客

12-20

2553

Electron的运行环境为Chromium + Node.js, 而Chromium采用的是多进程机制,也就是说每个页面都是一个独立的进程(渲染进程)，因此页面之间是没有直接关系的，要想进行通信，需要借助主进程作为桥梁。所以我们首先先来学习主进程和渲染进程怎么通信:1. 渲染进程---->主进程发送端:ipcRenderer.send(channel, data)接收端:ipcMain.o...

如何在Electron中实现多个窗口之间的数据传递？

07-09

在 Electron 应用中实现多个窗口之间的数据通信和传递，可以通过多种机制来完成，包括使用 IPC 通信、共享文件以及全局变量等方法。这些方式可以满足不同场景下的需求。 ### 使用 IPC 通信进行窗口间的数据传递 IPC（Inter-Process Communication）是主进程与渲染进程之间交换信息的常用方式。当需要从一个窗口向另一个窗口发送数据时，可以通过主进程作为中介来进行消息转发。例如，在第一个窗口中发送一条消息到主进程，并由其将该消息传递给第二个窗口： ```javascript // 主进程中 const { ipcMain } = require('electron'); ipcMain.on('send-to-second-window', (event, data) => { // 假设 secondWindow 是已经创建好的第二个窗口实例 if (secondWindow) { secondWindow.webContents.send('receive-from-first-window', data); } }); ``` 在第一个窗口的渲染进程中触发消息发送： ```javascript.html  <button id="sendMessage">Send Message</button> <script> const { ipcRenderer } = require('electron'); document.getElementById('sendMessage').addEventListener('click', () => { const message = 'Hello from first window!'; ipcRenderer.send('send-to-second-window', message); }); </script> ``` 而在第二个窗口的渲染进程中监听并处理接收到的消息： ```javascript.html  <script> const { ipcRenderer } = require('electron'); ipcRenderer.on('receive-from-first-window', (event, data) => { console.log(`Received message: ${data}`); // 处理数据逻辑 }); </script> ``` 这种方式允许两个独立的渲染进程通过主进程安全地交换信息[^1]。 ### 使用共享文件或全局变量存储数据对于简单的数据共享需求，可以考虑使用本地文件系统或者全局变量来保存状态。这种方法适用于不需要实时更新的情况。比如，可以在主进程中定义一个全局对象用于临时存储数据： ```javascript // 主进程代码 global.sharedData = { value: '' }; ``` 然后，在任一窗口的渲染进程中访问这个全局变量： ```javascript // 渲染进程代码 const remote = require('electron').remote; console.log(remote.getGlobal('sharedData').value); ``` 这种方式适合少量非敏感数据的跨窗口访问。 ### 利用 WebContents 发送事件除了 IPC 之外，还可以直接利用 `BrowserWindow` 实例的 `webContents` 属性来发送自定义事件至特定窗口。这通常用于更直接的单向通信模式，其中一方主动推送消息给另一方。 ```javascript // 主进程中 function sendEventToWindow(windowInstance, channel, payload) { windowInstance.webContents.send(channel, payload); } ``` 接着，在目标窗口的渲染进程中注册监听器以接收这些事件： ```javascript // 渲染进程中 const { ipcRenderer } = require('electron'); ipcRenderer.on('custom-event', (event, args) => { // 对接收到的数据进行处理 }); ``` 这种技术提供了灵活性，尤其是在构建复杂交互流程时非常有用[^1]。 ### 总结综上所述，Electron 提供了丰富的工具集支持开发者实现多窗口应用内的高效通信。选择何种方法取决于具体的应用场景及性能要求等因素。合理运用上述策略能够极大地提升用户体验并简化开发工作流。