Manipulate DOM in Electron

问题

What is the best way to manipulate DOM within an electron app?

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)

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>

回答1:

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.

For Instance (Backend to Frontend);

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

For Instance (Frontend to Backend);

Your frond-end;

const {ipcRenderer} = require('electron');

ipcRenderer.send('bar',"I did something for you");

Your back-end;

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

UPDATE AFTER UPDATING QUESTION;

I tried your codes on my local, It seems like working.

Could you please try it with insertAdjacentHTML instead of 'innerHTML' to just make sure or just use console.log.

Like this;

document.getElementById('konsole').insertAdjacentHTML('beforeend',message);