electron窗口之间如何传递数据

electron窗口之间传递数据需要用到ipcMain和ipcRenderer这两个模块
ipcMain用于主窗口中,ipcRenderer可以用于其他的窗口
例子如下:
主窗口:window1, 其他窗口:window2
window1 <-> window2
在window2中会通过ipcRenderer触发一个事件,用于接收window1传递过来的数据,
在window2关闭时,会通过ipcRenderer给window1发送一个消息,window1通过
ipcMain触发一个事件,用于获取window2发过来的数据。

index.html主窗口页面代码:

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>窗口之间的交互</title>
      <script src="event.js"></script>
  </head>
  <body>
  <button onclick="onClick_SendData()">向新窗口传递数据</button>
  <p/>
  <label id="label_return"></label>
  </body>
</html>

other.html其它窗口页面代码:

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title>接收数据的窗口</title>
      <script src="event.js"></script>
  </head>
  <body onload="onLoad()">
  <h1>姓名:<label id="label_name"></label></h1>
  <h1>薪水:<label id="label_salary"></label></h1>

  <button onclick="onClick_Close()">关闭当前窗口,并返回数据</button>
  </body>
</html>

event.js代码:

const remote = require('electron').remote;
const BrowserWindow = remote.BrowserWindow;

// 获取ipcMain对象
const ipcMain = remote.ipcMain;
const {ipcRenderer} = require('electron');
ipcMain.on('other',(event, str) => {
   const labelReturn = document.getElementById('label_return');
   labelReturn.innerText = labelReturn.innerText + '\r\n' + str;
});
//  主窗口向other窗口发送数据
function onClick_SendData() {
    var win = new BrowserWindow({
      show:false,
      x:10,
      y:20,
      width:400,
      height:400,
      webPreferences: {
        nodeIntegration: true
      }
    });
    win.loadFile('./other.html');
    win.once('ready-to-show',()=>{
        win.show();
        win.webContents.send('data',{name:'Bill',salary:2345});
    });

}

//  other窗口装载页面时显示主窗口发过来的数据
function onLoad() {
    ipcRenderer.on('data',(event, obj) => {
       const labelName = document.getElementById('label_name');
       const labelSalary = document.getElementById('label_salary');
       labelName.innerText = obj.name;
       labelSalary.innerText = obj.salary;
    });
}

//  关闭other窗口

function onClick_Close() {
    const win = remote.getCurrentWindow();
    ipcRenderer.send('other','窗口已经关闭');
    win.close();
}

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: