Manipulate DOM in Electron

Question

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>

utkuDAT · Answer 1 · 2016-07-29T15:24:47.400

5

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

edited Jul 29 '16 at 15:24

answered Jul 29 '16 at 08:53

utkuDAT

334
1
3
16

It works just if I launch the events manually, If I put a secuence of functions the main process give the control to renderer process when the last function has finished, losing the inbetween messages. – Francis Vega Jul 29 '16 at 14:31
It doesn't work. :S I recorded a gif to show that. I want the temrinal console.log behaviaour in the electron DOM, step by step. note: I put a big for() loop to simulate process time. https://drive.google.com/file/d/0B9FZG4S1yT5wNk04ajNHQTZ4RTQ/view – Francis Vega Jul 29 '16 at 15:41
I clearly understood your problem and investigated about an hour. However, I couldn't figure it out. I guess, there is something that we missed. Actually, why do you need something like that ? We might your problem with a different way. – utkuDAT Jul 29 '16 at 17:04
OMG, thanks so much. I like something like a "terminal" or "console". Im writing a simple UI wrapper for several CLI apps and I need to get feedback of process. errors, etc.. – Francis Vega Jul 29 '16 at 18:21
I have inspected some open source projects made with Electron and it seems that setInterval is used to update the render thread from main thread. – Francis Vega Jul 31 '16 at 10:04
I've not figure how I can implement that :S – Francis Vega Jul 31 '16 at 11:34

score 0 · Answer 2 · answered Jul 28 '16 at 11:34

0

"result" is a reference type value. "result" always chenge value when result = funcC() or another; Try this:

$('#msg').text(result.ToString());

answered Jul 28 '16 at 11:34

Stanislav Vorohov

3
3

Manipulate DOM in Electron

2 Answers2

Linked