在 Electron 中操作 DOM答案

【问题标题】：Manipulate DOM in Electron在 Electron 中操作 DOM
【发布时间】：2016-12-02 16:09:27
【问题描述】：

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

我使用 ipc 和 webcontents 从文档中制作了一些教程，但没有成功

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

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

我要放另一个代码，更容易看，更容易测试（我认为），是真实的代码并且可以工作（但不像我想要的那样）

当我启动电子时，只写最后一条消息。好的，响应真的很快，我可能看不到第一条消息，但要丢弃我也放了一个 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>

【问题讨论】：

标签： javascript dom ipc render electron

【解决方案1】：

“结果”是一个引用类型值。当 result = funcC() 或另一个时，“结果”总是改变值；试试这个：

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

【讨论】：

【解决方案2】：

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

例如（后端到前端）；

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

例如（前端到后端）；

你的前端；

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 而不是 'innerHTML' 来确保或仅使用 console.log。

像这样;

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

【讨论】：

只有当我手动启动事件时它才能工作，如果我放置一系列函数，则主进程在最后一个函数完成时将控制权交给渲染器进程，从而丢失中间消息。
它不起作用。 :S 我录制了一个 gif 来展示这一点。我想要电子DOM中的终端console.log行为，一步一步。注意：我放了一个大的 for() 循环来模拟处理时间。 drive.google.com/file/d/0B9FZG4S1yT5wNk04ajNHQTZ4RTQ/view
我清楚地理解了您的问题并调查了大约一个小时。然而，我想不通。我想，我们错过了一些东西。实际上，你为什么需要这样的东西？我们可能会以不同的方式解决您的问题。
天啊，非常感谢。我喜欢“终端”或“控制台”之类的东西。我为几个 CLI 应用程序编写了一个简单的 UI 包装器，我需要获得过程的反馈。错误等。
我检查了一些使用 Electron 制作的开源项目，似乎 setInterval 用于从主线程更新渲染线程。