[Electron] How to communicate between the main process and the rendering process

mian.js

const {app, BrowserWindow, ipcMain} = require("electron")
// 获取默认的会话对象


app.whenReady().then(async () => {
    let mainWindow = new BrowserWindow({
        width: 1800,
        height: 1600,
        webPreferences: {
            // 以下两个属性必须设置,在渲染进程才能正常访问require语句！
            nodeIntegration: true,
            contextIsolation: false,
        }
    })
    await mainWindow.loadFile("index.html")
    mainWindow.webContents.openDevTools()

    ipcMain.on("myRendererMessage", (event, args) => {
        console.log("基于Renderer渲染进程发送的消息", args)

        // 主进程=>向渲染进程回复方式一
        // event.reply("myMainMessage","isMainSendOk")
        // 主进程=>向渲染进程回复方式二
        mainWindow.webContents.send("myMainMessage", "isFromMainMessageOk")
    })

})

<!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'; style-src 'self' 'unsafe-inline'">
    <link href="./styles.css" rel="stylesheet">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version">111</span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
    <button id="send-message">send message</button>

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
  </body>
</html>

renderer.js

const {ipcRenderer} = require("electron")

document.getElementById("send-message").addEventListener("click", () => {
    ipcRenderer.send("myRendererMessage", "isFromRendererMessageOk")
})


ipcRenderer.on("myMainMessage", (e, ok) => {
    console.log("基于Main进程返回的消息", ok)
})

[Electron] How to communicate between the main process and the rendering process

Guess you like