問題描述
在電子應用程序中操作 DOM 的最佳方式是什么?
What is the best way to manipulate DOM within an electron app?
我使用 ipc 和 webcontents 從文檔中制作了一些教程，但沒有成功
I made some tutorials from docs using ipc and webcontents with no luck
我的應用程序非常簡單，我只想像控制臺一樣使用網絡并顯示來自多個同步函數(主進程)結果的消息(渲染進程)
My app is so simple, I just want to use the web like a console and showing messages (render proc) comming from the results of several sync functions (main proc)
我用真實代碼更新了問題.
I updated the question with real code.
我要放另一個代碼，更容易看，更容易測試(我認為)，是真實的代碼并且可以工作(但不像我想要的那樣)
I'm going to put another code, more simple to see and more simple to test (I think), is real code and works (but not like I want)
當我啟動電子時，只寫最后一條消息.好的，響應真的很快，我可能看不到第一條消息，但要丟棄我也放了一個 setTimeout 和一個大的 for() 循環(huán)，以使大寫函數需要更長的時間
When I launch electron only writes the last message. Ok, the response is really fast and I may not see the first messsage but to discard that I put a setTimeout and a large for() loop too, to make the uppercase function takes longer
index.js
const electron = require('electron');
const {app} = electron;
const {BrowserWindow} = electron;
const ipc = require('electron').ipcMain
app.on('ready', () => {
let win = new BrowserWindow({width: 800, height: 500});
win.loadURL('file://' + __dirname + '/index.html');
// Emitted when the window is closed.
win.on('closed', () => {
win = null;
});
// Event that return the arg in uppercase
ipc.on('uppercase', function (event, arg) {
event.returnValue = arg.toUpperCase()
})
});
index.html
<html>
<body>
<div id="konsole">...</div>
<script>
const ipc = require('electron').ipcRenderer
const konsole = document.getElementById('konsole')
// Functions
let reply, message
// First MSG
reply = ipc.sendSync('uppercase', 'Hi, I'm the first msg')
message = `Uppercase message reply: ${reply}`
document.getElementById('konsole').innerHTML = message
// Second MSG
reply = ipc.sendSync('uppercase', 'Hi, I'm the second msg')
message = `Uppercase message reply: ${reply}`
document.getElementById('konsole').innerHTML = message
</script>
</body>
</html>
推薦答案
您可以使用 webContents 和 IPC 在前端和后端之間進行通信.然后，您將能夠使用后端指令在前端操作您的代碼.
You can comminicate between your frond-end and back-end with webContents and IPC. Then, you'll be able to manipulate your codes in front-end with backend's directive.
例如(后端到前端)；
您的 main.js 正在向您的前端發(fā)送消息.
Your main.js is sending a message to your front-end.
mainwindow.webContents.send('foo', 'do something for me');
您的前端將在這里歡迎該消息；
Your frond-end will welcome that message here;
const {ipcRenderer} = require('electron');
ipcRenderer.on('foo', (event, data) => {
alert(data); // prints 'do something for me'
});
例如(前端到后端)；
你的前端；
const {ipcRenderer} = require('electron');
ipcRenderer.send('bar',"I did something for you");
您的后端；
const {ipcMain} = require('electron');
ipcMain.on('bar', (event, arg) => {
console.log(arg) // prints "I did something for you"
event.sender.send('foo', 'done') // You can also send a message like that
})
更新問題后更新；
我在本地嘗試了你的代碼，它似乎工作正常.
I tried your codes on my local, It seems like working.
您能否嘗試使用 insertAdjacentHTML 而不是 'innerHTML' 來確保或僅使用 console.log.
Could you please try it with insertAdjacentHTML instead of 'innerHTML' to just make sure or just use console.log.
像這樣;
document.getElementById('konsole').insertAdjacentHTML('beforeend',message);
這篇關于在 Electron 中操作 DOM的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！