试图通过 ipc 将数据从一个电子窗口发送到另一个电子窗口
Posted
技术标签:
【中文标题】试图通过 ipc 将数据从一个电子窗口发送到另一个电子窗口【英文标题】：Trying to send data from one electron window to another via ipc 【发布时间】：2017-07-22 21:24:50 【问题描述】：构建我的第一个电子应用程序，我希望工作流程如下：
主窗口打开 -> 用户点击“打开”按钮 -> 第二个窗口打开 -> 用户输入输入/点击提交 -> 主窗口打开备份显示用户输入
下面是我的app.on('ready') 来自我的main.js。应用程序启动 (win.loadURL) 工作正常，open-new-window 事件也是如此。奇怪的是input-broadcast。
当用户在第二个窗口输入输入时，主窗口将重新打开。但是，input-broadcast 中的console.log 中的文本不会出现，并且input-received 永远不会在主窗口的渲染器中触发。
不确定我做错了什么，但我也可能使用了错误的设计模式。任何帮助将不胜感激！
main.js
const app, BrowserWindow, ipcMain, remote = require('electron');
const url = require('url');
const path = require('path');
const countdown = require('./countdown');
let win;
const windows = [];
app.on('ready', () =>
console.log('app ready');
ipcMain.on('open-new-window', () =>
console.log('trying to open window');
win.loadURL(url.format(
pathname: path.join(__dirname, 'enterValue.html'),
protocol: 'file:',
slashes: true
));
);
ipcMain.on('input-broadcast', (evt, data) =>
console.log('input-broadcast happened in main');
win.webContents.send('input-received', data);
win.loadURL(url.format(
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
));
);
win = new BrowserWindow(width: 800, height: 600);
win.loadURL(url.format(
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
));
win.on('closed', () =>
console.log('closed');
win = null;
);
)
renderer.js（与 index.html 关联）
console.log('from renderer1');
const ipcRenderer = require('electron');
document.getElementById('start').addEventListener('click', ()=>
ipcRenderer.send('open-new-window');
console.log('window button clicked');
);
ipcRenderer.on('open-new-window', (evt, count) =>
document.getElementById('userInput').innerHTML(count);
);
ipcRenderer.on('input-received', (evt, data) =>
console.log('input received');
console.log(evt);
console.log(data);
);
renderer2.js（与用户 enterValue.html 关联）
console.log('from renderer2');
const ipcRenderer = require('electron');
document.getElementById('submitButton').addEventListener('click', (evt, input)=>
var input = document.getElementById('randomInput').value;
ipcRenderer.send('input-broadcast', input);
);
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Your input was <span id="userInput"></span><p>
<button id="start">Open</button>
<script>require('./renderer')</script>
</html>
enterValue.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Enter a name</p>
<input type="text" id="randomInput" placeholder="enter a value"/>
<button id="submitButton">Submit</button>
<script>require('./renderer2.js')</script>
</body>
</html>
【问题讨论】：
【参考方案1】：将输入发送回renderer.js 时，您的呼叫顺序不正确。你打电话
win.webContents.send('input-received', data)
当index.html 尚未重新加载到win 时！
要解决此问题，您应该交换呼叫并确保在发送 ipc 消息时内容已准备好
ipcMain.on('input-broadcast', (evt, data) =>
console.log('input-broadcast happened in main')
win.loadURL(url.format(
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
))
win.webContents.once('dom-ready', () =>
win.webContents.send('input-received', data)
)
)
【讨论】：
以上是关于试图通过 ipc 将数据从一个电子窗口发送到另一个电子窗口的主要内容，如果未能解决你的问题，请参考以下文章