如何创建子窗口在电子中发送客户 ID

Question

如何在电子应用中打开新 window 时发送客户 ID

const popupLogin = (htmlFile, parentWindow, width, height) => {
    let modal = new BrowserWindow({
        width: 600,
        height: 500,
        modal: true,
        resizable: false,
        icon: path.join(__dirname + '/public/auxwall/logos/favicon.png'),
        parent: MainWindow,
        frame: false,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            contextIsolation: false,
            nodeIntegration: true,

        }
    })

    modal.loadFile(`${__dirname}/pages/Company/login.html`)

    return modal;
}

我试过 modal.loadFile(${__dirname}/pages/Company/login.html?id=1234) 但出现错误电子：无法加载 URL：file:///Users/excelgraphics/Documents/Regular%20Jobs/OT/Aux%20service/Aux%20Services/pages/newService.html%3Fid=1234错误：ERR_FILE_NOT_FOUND

我试着这样做

但是模式 window 无法访问来自主进程的消息

谁能帮我解决这个问题？

Answer 1

记住你的模式只是一个没有框架的window，数据可以通过使用Inter-Process Communication来回传递。

要开始保护您的 Electron 应用程序，您应该仔细阅读 Context Isolation。

要将 id 传递给新创建的 window，请使用 {window}.webContents.send 方法。

加载 login.html 页面后，立即将 id 发送到 window。

在你的主线程脚本中...

const popupLogin = (htmlFile, parentWindow, width, height) => {

    // Get the customers id from whatever source necessary.
    let id = 99;

    // Create the window.
    let modal = new BrowserWindow({
        width: 600,
        height: 500,
        modal: true,
        resizable: false,
        icon: path.join(__dirname + 
 '/public/auxwall/logos/favicon.png'),
        parent: MainWindow,
        frame: false,
        show: false, // Hide possible flash and DOM update(s).
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            contextIsolation: true, // Set to true
            nodeIntegration: true,  // Node integration (removed in Electron v12)
        }
    })

    // Load the window.
    // Note: The loadFile() method returns a promise.
    modal.loadFile(`${__dirname}/pages/Company/login.html`)
        .then(() => { modal.webContents.send('login:id', id); })
        .then(() => { modal.show(); }) // Now show the modal

    return modal;
}

preload.js（主线程）

const contextBridge = require('electron').contextBridge;
const ipcRenderer = require('electron').ipcRenderer;

// White-listed channels.
const ipc = {
    'render': {
        // From render to main.
        'send': [],
        // From main to render.
        'receive': [
            'login:id'
        ],
        // From render to main and back again.
        'sendReceive': []
    }
};

contextBridge.exposeInMainWorld(
    // Allowed 'ipcRenderer' methods.
    'ipcRender', {
        send: (channel, args) => {
            let validChannels = ipc.render.send;
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, args);
            }
        },
        receive: (channel, listener) => {
            let validChannels = ipc.render.receive;
            if (validChannels.includes(channel)) {
                // Deliberately strip event as it includes `sender`
                ipcRenderer.on(channel, (event, ...args) => listener(...args));
            }
        },
        invoke: (channel, args) => {
            let validChannels = ipc.render.sendReceive;
            if (validChannels.includes(channel)) {
                return ipcRenderer.invoke(channel, args);
            }
        }
    }
);

login.html（渲染线程）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="module" src="login.js"></script>
    </head>
    <body>
        ....
    </body>
</html>

login.js（渲染线程）

(function() => {
        window.ipcRender.receive('login:id', (event, id) => { customerId(id); });
})();

function customerId(id) {
   console.log(id);
}

如何创建子窗口在电子中发送客户 ID

How can create subwindow send customer id in electron

javascript

node.js

electron