如何从主进程调用渲染器视图中的函数答案

【问题标题】：How do you call a function in Renderer View from the Main Process如何从主进程调用渲染器视图中的函数
【发布时间】：2021-11-20 03:15:08
【问题描述】：

我正在尝试将一些数据从主进程发送到渲染器（浏览器视图），但似乎遇到了障碍。

当我调用 window.webContents.send 时，事件只能在预加载中被捕获。我想用这个函数修改渲染器上的数据（修改屏幕内容）。

Preload 似乎是一条非常单向的街道，我可以从 html 视图中调用方法，但是如何从 preload 中调用 html 视图？

或者我如何将信息从 Main 发送到渲染器视图并在那里修改 html？

有什么建议吗？

【问题讨论】：

在Q/A 中，我展示了一个使用 ContextBridge API 且无需启用 nodeIntegration 的主进程和渲染器进程之间的 IPC 通信示例。希望这会有所帮助。
我刚刚实现了它，并且只触发了一次。我错过了什么吗？我正在尝试触发重复触发的事件

标签： electron

【解决方案1】：

当我调用 window.webContents.send 时，事件只能在预加载中被捕获。我想用这个函数修改渲染器上的数据（修改屏幕内容）。

您可以在预加载脚本中通过上下文桥公开函数。这将允许您的渲染器设置一个从主进程接收消息的侦听器。

这是一个计数器的玩具示例，它将在您的 HTML 中增加一个计数器：

// main process
mainWindow.webContents.send('update-counter', 1)

// preload
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  handleCounter: (callback) => ipcRenderer.on('update-counter', callback)
})

// renderer process
const counter = document.getElementById('counter')

window.electronAPI.handleCounter((event, value) => {
    const oldValue = Number(counter.innerText)
    const newValue = oldValue + value
    counter.innerText = newValue
})

<!--html-->
<body>
  Current value: <strong id="counter">0</strong>
  <script src="./renderer.js"></script>
</body>

【讨论】：

这对我来说很好。感谢您的帮助