electron通信——渲染进程to主进程to渲染进程

镭封

已于 2024-03-21 11:43:01 修改

阅读量325

点赞数 2

文章标签： electron 前端 javascript

于 2024-03-21 11:31:13 首次发布

本文链接：https://blog.csdn.net/xiaochuanxuzhou/article/details/136903531

版权

完整代码

main.js

const { app, BrowserWindow, ipcMain } = require('electron/main')
const path = require('node:path')

let mainWindow,renderer1
function createWindow () {
     mainWindow = new BrowserWindow({
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    })

    mainWindow.loadFile('main.html')

    renderer1 = new BrowserWindow({
        width: 400,
        height: 300,
        parent:mainWindow,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    });

    renderer1.loadFile('renderer1.html');
}

ipcMain.on('render1-message',(event, data) => { // data为接受到的消息
    console.log("接收到render1发送过来的消息：",data)
    // 回复渲染进程
    event.reply('render1-reply', 'main received render1');
})

app.whenReady().then(() => {
    createWindow()

    app.on('activate', function () {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})

render1.js

// 使用 preload.js 中暴露的 electronAPI 对象
window.addEventListener('DOMContentLoaded', (event) => {
    const btn = document.getElementById('btn');
    const changeTxt = document.getElementById('changeTxt');

    btn.addEventListener('click', () => {
        // 发送消息到主进程
        window.electronAPI.sendToMain({ message: 'Hello from renderer 1' });
    });

    // 接收主进程回复的消息
    window.electronAPI.receiveFromMain((reply) => {
        changeTxt.textContent = reply; // 更新页面上的文本
    });
});

preload.js

const {contextBridge, ipcRenderer} = require('electron/renderer')

contextBridge.exposeInMainWorld('electronAPI', {
    // 暴露给渲染进程的函数
    sendToMain: (data) => {
        // 向主进程异步发送消息，ipcRenderer.sendSync是同步发送
        ipcRenderer.send("render1-message", data);
    },

    // 接收主进程回复的函数
    receiveFromMain: (func) => {
        // 监听主进程的回复
        ipcRenderer.on("render1-reply", (event, ...args) => func(...args));
    }
})

main.html和render1.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>main window</title>
</head>
<body>
<p id="changeTxt">旧的信息</p>
<button  id="btn">发送</button >
<script src="./main.js"></script>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>render1</title>
</head>
<body>
<p id="changeTxt">旧的信息</p>
<button  id="btn">发送</button >
<script src="./renderer1.js"></script>
</body>
</html>