Electron学习（二）之主进程与渲染进程的通讯

2022-06-29 23:05:13 阅读：159 来源： 互联网

模拟主进程与渲染进程的通讯过程

渲染进程

根目录下添加renderer.js，既支持node js也支持dom js，示例代码如下：

//这是渲染进程
const {ipcRenderer}=require("electron")
//下面是从渲染进程向主进程发送消息
window.addEventListener('DOMContentLoaded',()=>{
    ipcRenderer.send("message","I am from the rendering process!")
    ipcRenderer.on("reply",(event, args)=>{
        document.getElementById('message').innerHTML=args
    })
})

主进程

示例代码如下：

const {app,BrowserWindow,ipcMain}=require("electron")
//ready：当electron完全加载，准备好创建BrowserWindow的时候
app.on('ready',()=>{
  const win=new BrowserWindow({
    width:800,
    height:600,
    webPreferences:{
      //意思是在man.js中可以使用nodejs的api
      nodeIntegration:true,
      //加上这段代码后支持node Api
      contextIsolation: false
    }
  })
  win.loadFile("index.html");
  ipcMain.on("message",(event, args)=>{
    console.log(args)
    // event.sender.send("reply","I am the main process,Over!")
    // event.sender和win是一样的
    win.send("reply","I am the main process,Over!")
  })
})

index页面

示例代码如下：

<!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>
    <p id="message"></p>
    <!--渲染进程添加-->
    <script src="./renderer.js"></script>

  </body>
</html>

运行效果

标签：渲染,win,args,js,Electron,进程,event
来源： https://www.cnblogs.com/longronglang/p/16425199.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Electron学习（二）之主进程与渲染进程的通讯

渲染进程

主进程

index页面

运行效果