AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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","工作没做完，还得继续干")
    };
}

 

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

相关推荐

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 搭建...
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开发跨平台的软件是一个优秀的解决方案。下面简单介绍一下El...
Electron学习一——— electron的基础创建
前言本人是做java开发的（菜鸟），做web项目的朋友们基本上都会遇到同样一个，永远不知道客户会怎么样使用，或者说永远不知道客户会用什么浏览器打开我们做出来的应用，就算你跟他说明了一定得用某某某浏览器打开，还...
electron-builder的使用初接触，有些含义不懂
electron-builder是将electron做的桌面应用打包成安装包的插件。一、安装使用yarn安装，使用npm安装的有问题（没有尝试），先安装yarn工具。npminstall-gyarn安装electron-builderyarnaddelectron-builder--save-dev...
asar 如何解密加密？electron 的 asar 的具体用法
来源：https:/ewsn.net/say/electron-asar.html 在electron中，asar是个特殊的代码格式。asar包里面包含了程序猿编写的代码逻辑。默认情况下，这些代码逻辑，是放置在resource/app目录下面的，明文可见，这样的话，...
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native