如何动态更改Electron中div的内容？

Question

我是第一次玩Electron，单击按钮似乎无法刷新div的内容。单击按钮将联系后端，并返回要显示在上述div中的结果（开头是空的）。

我试图检查win对象以查看是否有类似document.getElementById('...')的方法，但是我似乎找不到这些方法。

有人知道如何在Electron应用程序中动态更新HTML元素的内容吗？

Answer 1

只能从renderer线程中操纵dom。您需要从main向渲染器线程发送请求，以执行您要的操作。

您还可以创建一个抽象的HTML请求侦听器，例如：

var actions = {
  hide: function(elem) {
    elem.style.display = "none";
  },
  show: function(elem) {
    elem.style.display = null;
  }
};

function customQuery(query, action) {
  for (var element of document.querySelectorAll(query)) {
    if (typeof element[action] === "function") element[action]();
    else actions[action](element);
  }
}

ipcRenderer.on("customQuery", function (event, ...args) {
  customQuery(...args);
});

可以通过执行win.webContents.send("customQuery", "#myElement", "hide");