electron - 使用IPC层和contextBridge将数据发送到Electron中的渲染器

Question

我去掉了不相关的部分:

main.js

let window = null;
 app.on('ready', () => {
    window = new BrowserWindow({
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            enableRemoteModule: false,
            preload: path.join(__dirname, "preload.js")
        }
    });

    window.loadFile('index.html')
        .then(() => {})
        .catch(err => console.log(err));
});

我在 main.js 中调用超时

window.webContents.send('store-data', "MESSAGE");

预加载.js

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

contextBridge.exposeInMainWorld('electron', {
    storeData: (channel, data) => {
        ipcRenderer.on(channel, (event, data) => {
            return data;
        });
    }
});

index.html

window.electron.storeData('store-data', (data) =>{
    console.log(data);
});

这是有效的，因为我在index.html 端得到了一个对象，但没有数据。

Answer 1

我从从事 Electron 工作的人那里获得了帮助。注意:IPC层之间的通信需要仔细监控和过滤，以防止出现安全问题。

main.js

let window = null;

app.on('ready', () => {
    window = new BrowserWindow({
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            enableRemoteModule: false,
            allowRunningInsecureContent: false,
            experimentalFeatures: false,
            preload: path.join(__dirname, "preload.js")
        }
    });

    window.loadFile('index.html')
        .then(() => {})
        .catch(err => console.log(err));
});

ipcMain.on('save', (event,text) => {
    setTimeout(()=>{
        event.sender.send('store-data', text);
    }, 1000) 
});

请注意，超时和回调仅用于演示目的。这更多的是一个概念证明。

预加载.js

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

contextBridge.exposeInMainWorld('electron', {
    saveToElectron: (text) => ipcRenderer.send('save', text),
    storeData: (channel, func) => {
        ipcRenderer.on(channel, func);
    }
});

index.html的JS

    window.electron.storeData('store-data', (event,  data) =>{
        console.log("From Server: "+  data);
    });

这主要只是从 main 向渲染进程发送一条消息...并附加一个事件监听器来监听该消息(在本示例中，它会导致保存文件)。