如何在 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");访问