在 Electron 中操作 DOM

Question

在 Electron 中操作 DOM

Fra*_*ega 3 javascript dom ipc render electron

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

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

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

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

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

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

索引.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()
  })
});

Run Code Online (Sandbox Code Playgroud)

索引.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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

utk*_*DAT 5

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

对于实例（后端到前端）；

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

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

Run Code Online (Sandbox Code Playgroud)

您的前端将在这里欢迎该消息；

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

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

Run Code Online (Sandbox Code Playgroud)

对于实例（前端到后端）；

你的前端；

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

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

Run Code Online (Sandbox Code Playgroud)

你的后端；

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

Run Code Online (Sandbox Code Playgroud)

更新问题后更新；

我在我的本地尝试了你的代码，它似乎工作。

您能否尝试使用insertAdjacentHTML而不是“innerHTML”来确保或仅使用 console.log。

像这样;

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

归档时间：	9 年，1 月前
查看次数：	6459 次
最近记录：	9 年，1 月前