将数据从main传递到渲染器(electron-js)

neskvpey 于 2022-12-16 发布在 Electron

关注(0)|答案(1)|浏览(205)

我正在摆弄electron。在我的应用程序中，我有一个包含应用程序所有设置的Javascript对象。这个对象有一个名为“renderer”的键，我希望将它传递给渲染窗口，以便将所有设置保存在一个方便的地方。
我一直在查阅文档，我发现最好的方法如下（除了通过BrowserWindow的additionalarguments通过process.argv传递变量之外）。
在main.js中：

ipcMain.handle('getSettings', () => {
        return settings.renderer
    })

preload.js

contextBridge.exposeInMainWorld('bridge', {
    getSettings: () => ipcRenderer.invoke('getSettings')
})

renderer.js

function getSettings() {
        settings = window.bridge.getSettings().then(response => {
            console.log(response)
        })
    }

    getSettings()

是否有更方便的方法来完成这一点，以及是否有可能以同步方式完成这一点？

electron

来源：https://stackoverflow.com/questions/73128159/passing-data-from-main-to-renderer-electron-js

1条答案

按热度按时间

ffscu2ro1#

创建并加载窗口后，可以立即通过IPC将设置对象发送到呈现进程。

使用contents.send（channel，...arg）将数据发送到渲染进程。
在preload.js脚本中使用ipcRenderer.on（channel，listener）从主进程接收数据。

main.js（主进程）

// Import required electron modules
const electronApp = require('electron').app;
const electronBrowserWindow = require('electron').BrowserWindow;

// Import required Node modules
const nodePath = require('path');

// Prevent garbage collection
let window;

// Settings object
let settings = {
    'renderer': {
        'key1': 'value1',
        'key2': 'value2'
    }
}

function createWindow() {
    const window = new electronBrowserWindow({
        x: 0,
        y: 0,
        width: 800,
        height: 600,
        show: false,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            preload: nodePath.join(__dirname, 'preload.js')
        }
    });

    window.loadFile('index.html')
        .then(() => { window.webContents.send('sendSettings', settings.renderer); })
        .then(() => { window.show(); });

    return window;
}

electronApp.on('ready', () => {
    window = createWindow();
});

electronApp.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        electronApp.quit();
    }
});

electronApp.on('activate', () => {
    if (electronBrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

preload.js（主流程）

// Import the necessary Electron modules
const contextBridge = require('electron').contextBridge;
const ipcRenderer = require('electron').ipcRenderer;

// Exposed protected methods in the render process
contextBridge.exposeInMainWorld(
    // Allowed 'ipcRenderer' methods
    'bridge', {
        // From main to render
        sendSettings: (message) => {
            ipcRenderer.on('sendSettings', message);
        }
    }
);

index.html（渲染进程）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Electron Test</title>
        <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>
    </head>

    <body>
        <p>See Developer Tools -> Console</p>
    </body>

    <script>
        window.bridge.sendSettings((event, settings) => {
            console.log(settings);
        });
    </script>
</html>

赞(0）回复(0）举报 2022-12-16

我来回答

将数据从main传递到渲染器(electron-js)

1条答案

相关问题

热门标签

最新问答