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>
<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>
<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();
}
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();
}