最小化和关闭按钮在 Electron 应用程序中不起作用答案

【问题标题】：Minimize and close buttons not working in Electron app最小化和关闭按钮在 Electron 应用程序中不起作用
【发布时间】：2021-07-01 21:12:43
【问题描述】：

我正在使用 Electron 框架制作应用程序，并尝试使用按钮来关闭和最小化窗口。我已经尝试了多种方法来做到这一点，但没有成功。

这是我目前拥有的：
HTML：

<body>
    <!-- Titlebar -->
    <button id="minimize-button">-</button>
    <button id="close-button">x</button>

    <!-- Script -->
    <script src="./js/minimize-close.js"></script>
</body>

JS（最小化-close.js）：

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

document.getElementById("minimize-button").addEventListener('click', () => {
    ipcRenderer.send('minimize-window');
});

document.getElementById("close-button").addEventListener('click', () => {
    ipcRenderer.send('close-window');
});

JS（index.js）：

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

function createWindow(){
    const window = new BrowserWindow({
        width: 960, height: 580,
        resizable: false, maximizable: false,
        frame: false, autoHideMenuBar: true,
        icon: './icon.ico',
        webPreferences: {
            nodeIntegration: true,
            devTools: false
        }
    });

    window.loadFile('./src/index.html');
}

// Minimize and close window
ipcMain.on('minimize-window', () => {
    window.minimize();
});

ipcMain.on('close-window', () => {
    window.close();
});

app.whenReady().then(() => {
    createWindow();

    app.on('activate', function(){
        if(BrowserWindow.getAllWindows().length === 0){
            createWindow();
        }
    });
});

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

【问题讨论】：

您的遥控器似乎不正确，我认为应该是const { remote } = require("electron")，因为您只需要电子，而不是远程模块。此外，remote 似乎已被弃用，您应该改用 ipcMain 和 ipcRenderer (electronjs.org/docs/api/ipc-main)，它们可以让您将事件从客户端发送到主进程。
我已经尝试过使用 ipcRenderer，我会再试一次。
能否将您对 ipcRenderer 和 ipcMain 的尝试添加到您的问题中？
如果不行我就去做。
等一下，我认为您可能对 window 变量的范围有疑问，您将变量 window 定义为函数 createWindow 的范围，但使用变量在那个范围之外。尝试在createWindow 函数中设置ipcMain.ons 看看是否可行

标签： javascript node.js electron window

【解决方案1】：

您需要设置contextIsolation: false。
我也读过window 必须是全球性的。如果不是在某个时候它会被垃圾收集器收集，因为创建它的函数已经完成。

let window;

function createWindow(){
    window = new BrowserWindow({
        width: 960, height: 580,
        resizable: false, maximizable: false,
        frame: false, autoHideMenuBar: true,
        icon: './icon.ico',
        webPreferences: {
            nodeIntegration: true,
            // devTools: false,  // commented for debugging purposes
            contextIsolation: false
        }
    });

    window.loadFile('./src/index.html');
    window.webContents.openDevTools(); // Open dev tools to see if any error arised. In this case I saw 'require is not defined' before setting contextIsolation. Remove it when going into production.
}

选项 B：更“安全”

如果安全是一个问题，并且您希望 nodeIntegration 和 contextIsolation 保留其默认安全值，则需要 preload.js 方案。
如果您的应用程序加载了远程内容，则应该是这种情况。

HTML

<body>
    <!-- Titlebar -->
    <button id="minimize-button">-</button>
    <button id="close-button">x</button>
</body>

preload.js

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

window.addEventListener('DOMContentLoaded', () => {
    document.getElementById("minimize-button").addEventListener('click', () => {
        ipcRenderer.send('minimize-window');
    });
    
    document.getElementById("close-button").addEventListener('click', () => {
        ipcRenderer.send('close-window');
    });
})

index.js

const path = require('path');


function createWindow(){
    window = new BrowserWindow({
        width: 960, height: 580,
        resizable: false, maximizable: false,
        frame: false, autoHideMenuBar: true,
        icon: './icon.ico',
        webPreferences: {
            // devTools: false,  // commented for debugging purposes
            preload: path.join(__dirname, 'preload.js')
        }
    });

    window.loadFile('./src/index.html');
    window.webContents.openDevTools(); // Open dev tools to see if any error arised. In this case I saw 'require is not defined' before setting contextIsolation. Remove it when going into production.
}

【讨论】：