Question

在电子应用程序中操作DOM的最佳方法是什么？

我使用ipc和webcontents从docs制作了一些没有运气的教程

我的应用程序非常简单，我只想像控制台一样使用网页，并显示来自多个同步功能（主要进程）的结果的消息（渲染过程）

我用真实代码更新了这个问题。

我要放另一个代码，更简单易看，更简单的测试（我认为），是真正的代码和工作（但不是我想要的）

当我发射电子时，只写下最后一条消息。好吧，响应真的很快，我可能看不到第一个消息，但丢弃我也放了一个setTimeout和一个大的for（）循环，以使大写函数需要更长的时间

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>

Answer 1

您可以使用webContents和IPC在您的前端和后端之间进行通信。然后，您将能够使用后端指令在前端操作您的代码。

For Instance（Backend to Frontend）;

您的main.js正在向您的前端发送消息。

mainwindow.webContents.send('foo', 'do something for me');

你的前端会在这里欢迎这个消息;

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

ipcRenderer.on('foo', (event, data) => {
        alert(data); // prints 'do something for me'
});

For Instance（前端到后端）;

你的前端;

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

更新问题后更新

我在当地试过你的代码，看起来很有效。

请您使用 insertAdjacentHTML 代替＆lt; innerHTML＆＃39;只是确保或只是使用console.log。

喜欢这个;

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

Answer 2

“result”是引用类型值。当result = funcC（）或其他时，“result”总是变换值;试试这个：

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

在电子中操纵DOM

2 个答案: