gpt4 book ai didi

javascript - 尝试通过 ipc 将数据从一个 Electron 窗口发送到另一个 Electron 窗口

转载 作者:行者123 更新时间:2023-12-03 03:48:41 29 4
gpt4 key购买 nike

构建我的第一个 Electron 应用程序,我希望工作流程如下:

主窗口打开 -> 用户单击“打开”按钮 -> 第二个窗口打开 -> 用户输入/点击提交 -> 主窗口打开并显示用户输入

下面是我的 main.js 中的 app.on('ready')。应用程序启动 (win.loadURL) 工作正常,open-new-window 事件也是如此。奇怪之处在于输入广播。

当用户在第二个窗口中输入内容时,主窗口将重新打开。但是,input-broadcast 中的 console.log 中的文本不会出现,并且 input-received 永远不会在主窗口中触发渲染器。

不确定我做错了什么,但是我也可能使用了错误的设计模式。任何帮助将不胜感激!

ma​​in.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>

最佳答案

将输入发送回 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)
})
})

关于javascript - 尝试通过 ipc 将数据从一个 Electron 窗口发送到另一个 Electron 窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45259372/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com