在 Electron 中操作 DOM

2022-01-10 00:00:00 ipc render electron dom javascript

在电子应用程序中操作 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() 循环，以使大写函数需要更长的时间

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);

相关文章