电子中2个浏览器窗口之间的通信 [英] communication between 2 browser windows in electron
问题描述
我需要构建一个跨多个监视器屏幕的应用程序，如下所示: 电子支持多个窗口，但如何在它们之间进行通信?
I need to build an app that will span across multiple monitor screens, something like this: Electron suports multiple windows but how to comunicate between them?
推荐答案
要记住的主要事情是，在Electron中，进程间通信由ipcMain(在主进程中)和ipcRenderer(在所有创建的窗口中)完成.如下所示: 根据我在GitHub注释中看到的内容-不允许在Renderer实例之间进行直接通信.一切都必须通过mainProcess.
The main thing to remember is that in Electron, interProcess communication is done by ipcMain (in the main process) and ipcRenderer(in all the created windows). Like below: From what i've seen in the GitHub comments - direct communication between the Renderer instances is not allowed. Everything must pass trough the mainProcess.
代码: mainProcess.js:
function createWindow1 () {
window1 = new BrowserWindow({width: 800,height: 600})
window1.loadURL(`file://${__dirname}/window1.html`)
window1.webContents.openDevTools()
window1.on('closed', function () {
window1 = null
})
return window1
}
function createWindow2 () {
window2 = new BrowserWindow({width: 1000, height: 600})
window2.loadURL(`file://${__dirname}/window2.html`)
window2.webContents.openDevTools()
window2.on('closed', function () {
window2 = null
})
return window2
}
app.on('ready', () => {
window1 = createWindow1();
window2 = createWindow2();
ipcMain.on('nameMsg', (event, arg) => {
console.log("name inside main process is: ", arg); // this comes form within window 1 -> and into the mainProcess
event.sender.send('nameReply', { not_right: false }) // sends back/replies to window 1 - "event" is a reference to this chanel.
window2.webContents.send( 'forWin2', arg ); // sends the stuff from Window1 to Window2.
});
window1.html:
<body>
<input type="text" id="name" value="" placeholder="Enter your name">
<button type="button" id="sendName" >Send the name! </button>
</body>
<script>
// You can also require other files to run in this process
require('./window1.js')
</script>
window1.js:
const ipcRenderer = require('electron').ipcRenderer
let name = document.getElementById('name');
ButtonSendName = document.getElementById('sendName');
ButtonSendName.addEventListener('click', (event) => {
ipcRenderer.send('nameMsg', name.value);
})
ipcRenderer.on('nameReply', (event, arg) => {
console.log(arg) // why/what is not right..
});
window2.html:
window2.html:
<body>
<p id = "showName"></p>
</body>
<script>
require('./window2.js')
</script>
window2.js:
const { ipcRenderer } = require('electron')
showName = document.getElementById('showName')
ipcRenderer.on('forWin2', function (event, arg){
console.log(arg);
showName.innerHTML = arg;
});
console.log("I'm Window2");
演示会更好，但我不知道如何构建电子CodeBin应用.此图为您提供了一个想法:
A demo would be better, but I don't know how to build an electron CodeBin app. This image gives you an idea:
享受电子的力量！
这篇关于电子中2个浏览器窗口之间的通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
