admin管理员组

文章数量:1336367

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

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) ming 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>
Share edited Jul 29, 2016 at 14:49 Francis Vega asked Jul 28, 2016 at 10:13 Francis VegaFrancis Vega 1521 gold badge2 silver badges10 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 6

You can minicate 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 wele 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);

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

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

本文标签: javascriptManipulate DOM in ElectronStack Overflow