electron js如何調用索引中呈現的function

Question

能夠調用我在索引中呈現的 function，然后使用 globalShortcut 執行該 function，我感到很瘋狂，我正在研究並發現 IPC 可以執行，但所有示例都是使用 main 中的函數而不是從指數。 任何可以指導我的想法

Answer 1

我假設您已將nodeIntegration設置為 true 並將contextIsolation設置為 false， 如 Electron 文檔所建議的那樣。 要從主線程在渲染器進程中觸發 function，您可以使用ipcMain和ipcRenderer （這些模塊是 Electron 的一部分）。

首先，您需要使用 contextBridge 為渲染器公開一個contextBridge 。 這可以通過一個preload.js文件來完成，該文件可以像主線程一樣訪問所有模塊。

例子：

主程序

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

function createMainWindow(){
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            enableRemoteModule: false,
            preload: path.join(__dirname, 'preload.js'),
        },
    });
}

app.on('ready', () => {
    createMainWindow();
});

預加載.js

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

contextBridge.exposeInMainWorld('api', {
    send: (channel, data) => {
        // Whitelist channels
        let validChannels = ['toMain'];
        if (validChannels.includes(channel)) {
            ipcRenderer.send(channel, data);
        }
    },
    receive: (channel, func) => {
        let validChannels = ['fromMain'];
        if (validChannels.includes(channel)) {
            // Deliberately strip event as it includes `sender`
            ipcRenderer.on(channel, (event, ...args) => func(...args));
        }
    },
});

然后，在您的渲染器進程中，您可以使用window.api.send(channel, parameters); 將消息發送到主線程和window.api.receive(channel, parameters); 收聽傳入的。 同樣，您可以使用ipcMain.on(channel, (event, parameters) => { }); 在主進程中處理來自渲染器的消息。 但是，要直接向它發送消息，您必須使用webContents ，如下所示： mainWindow.webContents.send(channel, parameters); .

在您的情況下，要在渲染器中執行 function，您可以調用mainWindow.webContents.send('fromMain', 'trigger-function'); 在主進程中； 並在你的渲染器中監聽這個事件，就像這樣：

window.api.receive('fromMain', (parameters) => {
    if (parameters === 'trigger-function'){
        // Call your renderer function here
    }
});