electron主进程与渲染进程通信,webview与其加载页间的通信

1:进程间通信

进程间通信使用 ipcMain与ipcRenderer模块,参考:https://www.w3cschool.cn/electronmanual/electronmanual-ipc-main.html ;      https://www.w3cschool.cn/electronmanual/electronmanual-ipc-renderer.html

在主进程使用ipcMain

const ipcMain =require('electron').ipcMain;

ipcMain.on('**message**',function(event, arg) {//监听渲染进程发送的message

        console.log(arg);// prints "ping"

        event.sender.send('**reply**','pong');//event.sender获取事件的发送者,并发送reply事件,‘pong’为发送的数据

});

渲染进程ipcRenderer

const ipcRenderer =require('electron').ipcRenderer;

ipcRenderer.sendSync('**message**','ping')//发送同步消息,send()异步

ipcRenderer.on('**reply**',function(event, arg) {console.log(arg);// prints "pong"});//监听reply

在主进程也可以使用以下方式发送消息:mainWindow.webContents.send('saveMessage','delect',index,innerIndex)

webContents从主进程向渲染进程发送消息,查看更多 https://www.w3cschool.cn/electronmanual/electronmanual-web-contents.html .

以下为webContents的send()官方使用介绍

webContents.send(channel\[, arg1\]\[, arg2\]\[, ...\])

channel String

arg (可选)

通过 channel 发送异步消息给渲染进程,你也可发送任意的参数.参数应该在 JSON 内部序列化,并且此后没有函数或原形链被包括了.

渲染进程可以通过使用 ipcRenderer 监听 channel 来处理消息.

例子,从主进程向渲染进程发送消息 :

主进程:

var window=null;

app.on('ready',function(){

    window=new BrowserWindow({width:800, height:600});

    window.loadURL('file://'+ \_\_dirname +'/index.html');

       window.webContents.on('did-finish-load',function(){

            window.webContents.send('**ping**','whoooooooh!'); //主进程发送消息ping

     });

});

在渲染进程:

require('electron').ipcRenderer.on('**ping**', function(event, message) {//监听ping事件

      console.log(message);  // Prints "whoooooooh!"  

  });

2:使用webview控件加载页面时,webview所在页面与被加载页面间的通信

electron webview标签介绍:https://electronjs.org/docs/api/webview-tag

webview所有的方法必须在加载完成之后才能使用,如下:

webview所在页面

const webview = document.querySelector('webview')

   webview.addEventListener('dom-ready', () => {

          webview.openDevTools()

    })

使用send()方法发送消息webview.send('start') //发送start,同上面的 wenContents的send()方法

在被webview加载的页面里 

可以通过 ipcRenderer 模块去监听channel 事件,从而处理发过来的这些信息

const {ipcRenderer} = require('electron')

ipcRenderer.on('**start**', (ev) => {//监听start

            console.log(ev)

        })

$('#sendBT').click(function() {

            ipcRenderer.sendToHost('ztree') //向webview所在页面发送消息

  })

 注意ipcRenderer.sendToHost(channel[, arg1][, arg2][, ...]),它的事件将发往 host page 的 webview 元素,而不是主进程.

//在webview所在页面使用 webview.addEventListener('**ipc-message**',(event)=>{})监听被加载特免传送的消息

webview.addEventListener('**ipc-message**', (event) => { //ipc-message监听,被webview加载页面传来的信息

                console.log(event.channel)

            })
标签: electron
返回文章列表 文章二维码
本页链接的二维码
打赏二维码