在电子中操作DOM [英] Manipulate DOM in Electron
问题描述
在电子应用程序中操作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
我的应用程序是如此简单，我只想像控制台一样使用网络并显示来自多个同步功能(主proc)的结果的消息(渲染proc)
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()循环，以使大写函数花费更长的时间
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正在向您的前端发送一条消息.
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);
这篇关于在电子中操作DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
