Electron 中渲染进程与渲染进程之间的通信详解

分类：Electron作者：编程之家用户

Electron中渲染进程与渲染进程之间的通信主要有两种方式，一种是通过本地存储来实现，另外一种就是借助主进程进行传递消息。

1. 渲染进程之间通过本地存储进行通信

渲染进程index传递消息。

// index.js
window.onload = () => {
    var button = document.getElementById("button");
    button.onclick=()=>{
        // 渲染进程index与渲染进程news之间直接进行通信
        localStorage.setItem("msg","世界那么大，我想去看看");
    };
};

渲染进程news获取消息。

// news.js
window.onload=()=>{
    // 渲染进程index与渲染进程news之间直接进行通信
    var msg = localStorage.getItem("msg");
    alert(msg);
    // 世界那么大，我想去看看
}

 

2. 当前渲染进程向新打开的渲染进程传递消息

渲染进程index发送消息。

// index.js
const {ipcRenderer} =require("electron");
window.onload = () => {
    var button = document.getElementById("button");
    button.onclick=()=>{
        // 发送消息
        ipcRenderer.send(
            "openNews",
            "钱包那么少，哪儿也去不了"
        );
    };
};

主进程ipcMain接受渲染进程index的消息，并传递给新创建的渲染进程news。

// ipcMain.js
const {BrowserWindow,ipcMain} = require("electron");
const path = require("path");
// 监听渲染进程index传递的消息并创建新的渲染进程news
ipcMain.on("openNews",(e,data)=>{
    
    const newsWindow = new BrowserWindow({
        width:400,
        height:300,
        webPreferences:{
            // 集成node
            nodeIntegration:true,
            // 取消上下文隔离
            contextIsolation:false,
            // 启用remote模块
            enableRemoteModule:true
        }
    });
    newsWindow.loadFile(path.join(__dirname,"../news.html"));

    // 监听渲染进程news加载完成
    newsWindow.webContents.on('did-finish-load',(event)=>{
        // 发送消息给渲染进程news
        newsWindow.webContents.send("toNews",data)
    });
});

渲染进程news接受渲染进程index通过主进程ipcMian传递过来的消息。

// new.js
const {ipcRenderer} = require("electron");
// 监听渲染进程index通过主进程ipcMain发送的消息
ipcRenderer.on("toNews",(e,data)=>{
    alert(data);
    // 钱包那么少，哪儿也去不了
});

 

3. 新打开的渲染进程向之前已经打开的渲染进程传递消息

渲染进程news发送消息。

// news.js
window.onload = ()=>{
    var button = document.getElementById("button");
    button.onclick = ()=>{
        // 渲染进程news向渲染进程index传递消息
        ipcRenderer.send("sendToIndex","工作没做完，还得继续干")
    };
}

主进程ipcMain接受渲染进程news的消息，并传递给之前已经打开的渲染进程index。

// ipcMain.js
const {BrowserWindow,ipcMain} = require("electron");
const path = require("path");
// 保存已经打开的渲染进程index
var indexId;

// 监听渲染进程index传递的消息并创建新的渲染进程news
ipcMain.on("openNews",(e,data)=>{

    // 创建渲染进程news之前获取当前渲染进程index的id并保存；
    indexId = BrowserWindow.getFocusedWindow().id;

    // 创建渲染进程news
    ......

});


// 监听渲染进程news中传递过来的消息
ipcMain.on("sendToIndex",(e,data)=>{
    // console.log(data);
    // 工作没做完，还得继续干

    // 获取之前保存的渲染进程index
    var mainWindow = BrowserWindow.fromId(indexId);
    // 发送消息给渲染进程index
    mainWindow.webContents.send("toIndex",data);

})

渲染进程index监听渲染进程news通过主进程ipcMian传递过来的消息。

// index.js
const {ipcRenderer} =require("electron");

// 监听渲染进程news通过主进程ipcMain传过来的消息
ipcRenderer.on("toIndex",(e,data)=>{
    console.log(data);
});

 

4. 代码实例

主进程main.js文件代码：

// main.js
const { app, BrowserWindow } = require("electron");
const path = require("path");


const createWindow = () => {
    // 创建窗口
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            // 开启node
            nodeIntegration: true,
            // 取消上下文隔离
            contextIsolation: false,
            // 开启remote
            enableRemoteModule:true,
        }
    });
    // 加载本地文件
    mainWindow.loadFile(path.join(__dirname, "index.html"));
    // 加载远程地址
    // mainWindow.loadURL('https://github.com');

    // 开启调试模式
    mainWindow.webContents.openDevTools();

    // 引入主进程的通信
    require('./ipcMain/ipcMain.js');

}

// 监听应用的启动事件
app.on("ready", createWindow);

// 兼容MacOS系统的窗口关闭功能
app.on("window-all-closed", () => {
    // 非MacOS直接退出
    if (process.platform != "darwin") {
        app.quit();
    }
});

// 点击MacOS底部菜单时重新启动窗口
app.on("activate", () => {
    if (BrowserWindow.getAllWindows.length == 0) {
        createWindow();
    }
})

主进程main.js中引入的ipcMain.js文件代码：

// ipcMain.js
const {BrowserWindow,ipcMain} = require("electron");
const path = require("path");
// 保存已经打开的渲染进程index
var indexId;

// 监听渲染进程index传递的消息并创建新的渲染进程news
ipcMain.on("openNews",(e,data)=>{

    // 创建渲染进程news之前获取当前渲染进程index的id并保存；
    indexId = BrowserWindow.getFocusedWindow().id;

    const newsWindow = new BrowserWindow({
        width:400,
        height:300,
        webPreferences:{
            // 集成node
            nodeIntegration:true,
            // 取消上下文隔离
            contextIsolation:false,
            // 启用remote模块
            enableRemoteModule:true
        }
    });

    newsWindow.loadFile(path.join(__dirname,"../news.html"));

    // 监听渲染进程news加载完成
    newsWindow.webContents.on('did-finish-load',(event)=>{
        // 发送消息给渲染进程news
        newsWindow.webContents.send("toNews",data)
    });

});


// 监听渲染进程news中传递过来的消息
ipcMain.on("sendToIndex",(e,data)=>{
    // console.log(data);
    // 工作没做完，还得继续干

    // 获取之前保存的渲染进程index
    var mainWindow = BrowserWindow.fromId(indexId);
    // 发送消息给渲染进程index
    mainWindow.webContents.send("toIndex",data);

})

渲染进程index.html文件代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electron开发</title>
</head>
<body>
    <p>Electron中渲染进程与渲染进程之间的通信</p>
    <br><br>
    <button id="button">打开新窗口</button>
    <script src="./ipcRenderer/index.js"></script>
</body>


</html>

渲染进程index.html中引入的index.js文件代码：

// index.js
const {ipcRenderer} =require("electron");
window.onload = () => {
    var button = document.getElementById("button");
    button.onclick=()=>{

        // 渲染进程index与渲染进程news之间直接进行通信
        // localStorage.setItem("msg","世界那么大，我想去看看");
        
        // 发送消息
        ipcRenderer.send(
            "openNews",
            "钱包那么少，哪儿也去不了"
        );
    };
};

// 监听渲染进程news通过主进程ipcMain传过来的消息
ipcRenderer.on("toIndex",(e,data)=>{
    console.log(data);
});

渲染进程news.html文件代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electron开发</title>
</head>
<body>

    <p>这是打开的新页面</p>
    <button id="button">执行index里面的方法并传值</button>
    <script src="./ipcRenderer/news.js"></script>
</body>

</html>

渲染进程news.html中引入的news.js文件代码：


const {ipcRenderer} = require("electron");

// window.onload=()=>{
    // 渲染进程index与渲染进程news之间直接进行通信
    // var msg = localStorage.getItem("msg");
    // alert(msg);
    // 世界那么大，我想去看看
// }

// 监听渲染进程index通过主进程ipcMain发送的消息
ipcRenderer.on("toNews",(e,data)=>{
    alert(data);
    // 钱包那么少，哪儿也去不了
});



window.onload = ()=>{
    var button = document.getElementById("button");
    button.onclick = ()=>{
        // 渲染进程news向渲染进程index传递消息
        ipcRenderer.send("sendToIndex","工作没做完，还得继续干")
    };
}

 

原文地址：https://blog.csdn.net/weixin_40629244/article/details/115837063

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

electron打包中的坑如何解决
这篇文章主要讲解了“electron打包中的坑如何解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“electron...
electron打包的坑如何解决
这篇文章主要介绍“electron打包的坑如何解决”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“electron打包的坑如何...
VSCode中如何调试Electron应用的主进程代码
这篇文章主要为大家分析了VSCode中如何调试Electron应用的主进程代码的相关知识点，内容详细易懂，操作细节合理，具有一定参考价值。如果感兴趣的话，不妨跟着跟...
如何在VSCode上调试Electron应用的主进程代码
这篇“如何在VSCode上调试Electron应用的主进程代码”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价
使用electron-vue搭建桌面应用程序项目
vue-cli+electron一种新的脚手架(vue-electron)vue-electron主要业务逻辑都放在src下的renderer文件夹内，和之前的vue-cli搭建项目流程没有任何区别 GIT地址：https://github.com/SimulatedGREG/electron-vue 搭建项目：1.全局安装脚手架：npminstall--globalvue-cli
electron安装
1、首先成功安装Node.js。2、配置好环境变量path,参加上一篇博客《NodeJs安装》3、全局安装electron，并测试。如下图
为Electron 安装 vue-devtool等扩展
相关代码:https://github.com/WozHuang/Barrage-helper/blob/master/src/main/index.dev.js在SPA逐渐成为构建优秀交互体验应用的主流方式后，使用Electron开发跨平台的软件是一个优秀的解决方案。下面简单介绍一下Electron-vue安装vue-devtool的方式。安装步骤下载vue-de
Electron学习一——— electron的基础创建
前言本人是做java开发的（菜鸟），做web项目的朋友们基本上都会遇到同样一个，永远不知道客户会怎么样使用，或者说永远不知道客户会用什么浏览器打开我们做出来的应用，就算你跟他说明了一定得用某某某浏览器打开，还是有人会用别的浏览器打开，这种情况通常我们会去做适配（前端），最近公司有需求
electron-builder的使用初接触，有些含义不懂
electron-builder是将electron做的桌面应用打包成安装包的插件。一、安装使用yarn安装，使用npm安装的有问题（没有尝试），先安装yarn工具。npminstall-gyarn安装electron-builderyarnaddelectron-builder--save-dev二、配置在package.json 中配置"build":{
asar 如何解密加密？electron 的 asar 的具体用法
来源：https:/ewsn.net/say/electron-asar.html 在electron中，asar是个特殊的代码格式。asar包里面包含了程序猿编写的代码逻辑。默认情况下，这些代码逻辑，是放置在resource/app目录下面的，明文可见，这样的话，也就有了代码加密（asar打包）的需求 asar如何解密加密？electron的asar的
iview框架使用electron运行图标无法显示问题
 字体图标丢失问题解决方案 重新打包文件npmrunbuild再次运行electron 
electron-vue 图片加载失败后使用默认头像
<img:src="item.headUrl"alt=""class="contact-head":onerror="morenImage">data(){return{morenImage:'this.src="static/image/head.png"',//默认头像}}
electron-vue打包引用的图标不显示问题
在electron-vue中使用了字体图标，但是打包成.exe文件后图标不显示，路劲问题把字体图标放到static目录下就可以了，静态图片也一样我原来放在其它地方不行改到static目录就可以了
electron-vue 设置cookie
//设置登录cookiesetCookie(name,value){varDays=30;varexp=newDate();vardate=Math.round(exp.getTime()/1000)+Days*24*60*60;constcookie={url:this.webApi,name:name,value:value,e
Electron笔记
vue部分cnpminstall-gvue-clivueinitsimulatedgreg/electron-vuemy-projectelectron下载失败解决办法：单独设置electron为淘宝镜像，npmconfigsetelectron_mirrorhttps:/pm.taobao.org/mirrors/electron/yarnconfigsetelectron_mirrorhttps:/pm.taobao.org
electron打包分发
原始的方式打包下载对应的版本号的ReleaseElectron然后把对应的项目方便整理成这样的目录结构(Windows下)node_modules重新安装，不然可能启动失败把整文件夹给别人就可以了如果想改名子可以用改名工具rcedit应用程序打包成一个文件为了缓解windows路径名过长的问题（就
electron开发客户端注意事项兼开源个人知识管理工具“想学吗”
窗口间通信的问题electron窗口通信比nwjs要麻烦的多electron分主进程和渲染进程，渲染进程又分主窗口的渲染进程和子窗口的渲染进程主窗口的渲染进程给子窗口的渲染进程发消息1234567891011subWin.webContents.on('dom-ready', () => {    subWin.webCo
javascript – 具有下载属性的电子问题
按照上一个问题here,我有一个使用Electron平台和Javascript的桌面应用程序,我使用以下方法将HTML5画布转换为JPEG：<aid="download"download="Path.jpg">DownloadJPG</a>然后,functiondownload(){vardt=canvas.toDataURL('image/jpeg');this.href
Electron实现第一个应用 &quot;hello world&quot;
一.什么是Electron?它和NW.js的区别是什么？Electron是GitHub开发的桌面应用开发框架，它支持使用HTML、CSS、JavaScript来构建跨平台的桌面应用。Electron和NW.js(NW.js是什么可以百度下)的区别是：1.整合Chromium和Node.js的方式不同。在NW.js中，Chromium是直接被打补丁打进去
electron-vue 打开文件目录，打开文件夹，
1.打开父子模态创建，<button@click="showModalHandler">父子模态窗口</button>/enderer渲染器中主注册事件showModalHandler(){ipcRenderer.send("child-down-modal");}//主进程中触发事件/***父子模态窗口*/letchildDownModal;ipcMain.on(&#
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot