未收到电子模块

Question

我正在学习 Electronjs，我正在尝试创建一个窗口，通过按钮创建另一个窗口，但是当我测试时，我注意到 one.js 没有正确导入远程模块。这是 main.js 文件：

console.log('main process working');
console.log('main.js');

const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');
const { initialize, enable } = require('@electron/remote/main');

initialize();

function createWindows() {
    let win1 = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            enableRemoteModule: true
        }
    });

    let win2 = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            enableRemoteModule: true
        }
    });

    win1.loadURL(url.format({
        pathname: path.join(__dirname, 'one.html'),
        protocol: 'file',
        slashes: true
    }));

    win2.loadURL(url.format({
        pathname: path.join(__dirname, 'two.html'),
        protocol: 'file',
        slashes: true
    }));

    win1.webContents.openDevTools();
    win2.webContents.openDevTools();

    win1.on('closed', () => {
        win1 = null;
    });

    win2.on('closed', () => {
        win2 = null;
    });

    app.on('browser-window-created', (_, window) => {
        enable(window.webContents);
    });
}

app.on('ready', createWindows);

这是一个.js 文件：

console.log('From renderer 1');

const { ipcRenderer, remote } = require('electron');
const path = require('path');
const url = require('url');

const { enable } = require('@electron/remote/main');
enable(ipcRenderer);

ipcRenderer.on('electron-module', (event, electron) => {
    console.log('Electron module received');

    const newWindowBtn = document.getElementById('Btn');
    newWindowBtn.addEventListener('click', function (event) {
        console.log('Botão clicado!');

        let win3 = new remote.BrowserWindow({
            webPreferences: {
                nodeIntegration: true,
                contextIsolation: false,
                enableRemoteModule: true
            }
        });

        win3.loadURL(url.format({
            pathname: path.join(__dirname, 'three.html'),
            protocol: 'file',
            slashes: true
        }));

        win3.webContents.openDevTools();
    });
});

ipcRenderer.send('get-electron-module');

Main 创建两个窗口，窗口 1 有一个按钮，单击该按钮应创建一个新窗口。

在尝试完成这项工作时，我注意到该按钮不起作用。

Answer 1

实际上，当您单击 one.js 中的按钮时，它应该向将创建 win3 的 main.js 发送请求。 所以你的代码在 main.js 中将如下所示。添加此代码

console.log('main process working');
console.log('main.js');

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const url = require('url');
const { initialize, enable } = require('@electron/remote/main');

initialize();

function createWindows() {
    let win1 = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            enableRemoteModule: true
        }
    });

    let win2 = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            enableRemoteModule: true
        }
    });

    win1.loadURL(url.format({
        pathname: path.join(__dirname, 'one.html'),
        protocol: 'file',
        slashes: true
    }));

    win2.loadURL(url.format({
        pathname: path.join(__dirname, 'two.html'),
        protocol: 'file',
        slashes: true
    }));

    win1.webContents.openDevTools();
    win2.webContents.openDevTools();

    win1.on('closed', () => {
        win1 = null;
    });

    win2.on('closed', () => {
        win2 = null;
    });

    app.on('browser-window-created', (_, window) => {
        enable(window.webContents);
    });

    // Handle IPC to create new window
    ipcMain.on('create-window', () => {
        let win3 = new BrowserWindow({
            webPreferences: {
                nodeIntegration: true,
                contextIsolation: false,
                enableRemoteModule: true
            }
        });

        win3.loadURL(url.format({
            pathname: path.join(__dirname, 'three.html'),
            protocol: 'file',
            slashes: true
        }));

        win3.webContents.openDevTools();
    });
}
app.on('ready', createWindows);

one.js 看起来像这样

console.log('From renderer 1');

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

ipcRenderer.on('electron-module', (event, electron) => {
    console.log('Electron module received');

    const newWindowBtn = document.getElementById('Btn');
    newWindowBtn.addEventListener('click', function (event) {
        console.log('Botão clicado!');
        ipcRenderer.send('create-window');
    });
});

ipcRenderer.send('get-electron-module')`