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

Question

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

这是我目前拥有的：
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();
    }
});

Answer 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.
}

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

Minimize and close buttons not working in Electron app

javascript

window

node.js

electron