Javascript中的window如何關閉、最小化和最大化

Question

我想從 Javascript 關閉、最小化和最大化我的 electron 應用程序。我用這段代碼試過了。 它適用於最大化和關閉，但有時它不起作用。

const { app } = require("electron");
const remote = require("electron").remote;

function closeApplication() {
    window.close().method;
}

function maximizeWindow() {
    // win.maximize();
    // window.maximize();
    window.moveTo(0, 0);
    window.resizeTo(screen.width, screen.height);
}

function minimizeWindow() {
    let window = remote.getCurrentWindow();
    window.minimize();
}

誰能幫我

Answer 1

建議讓 Electron 在主進程中管理 window 的最小化、最大化、恢復和關閉。

有關詳細信息，請參閱下面的瀏覽器 Window - 實例方法。

• win.minimize()
• win.maximize()
• win.restore()
• win.close()

---

要實現此功能，可以使用一個簡單的preload.js腳本，該腳本配置為通過使用主進程和渲染進程之間的通道名稱來傳輸數據。

注意通道名稱window:minimize 、 window:maximize 、 window:restore和window:close的使用。 您可以使用任何您喜歡的頻道名稱。

preload.js （主進程）

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

// White-listed channels.
const ipc = {
    'render': {
        // From render to main.
        'send': [
            'window:minimize', // Channel names
            'window:maximize',
            'window:restore',
            'window:close'
        ],
        // From main to render.
        'receive': [],
        // From render to main and back again.
        'sendReceive': []
    }
};

// Exposed protected methods in the render process.
contextBridge.exposeInMainWorld(
    // Allowed 'ipcRenderer' methods.
    'ipcRender', {
        // From render to main.
        send: (channel, args) => {
            let validChannels = ipc.render.send;
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, args);
            }
        },
        // From main to render.
        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));
            }
        },
        // From render to main and back again.
        invoke: (channel, args) => {
            let validChannels = ipc.render.sendReceive;
            if (validChannels.includes(channel)) {
                return ipcRenderer.invoke(channel, args);
            }
        }
    }
);

此外，可以使用上述preload.js腳本，如下所示。

/**
 * Render --> Main
 * ---------------
 * Render:  window.ipcRender.send('channel', data); // Data is optional.
 * Main:    electronIpcMain.on('channel', (event, data) => { methodName(data); })
 *
 * Main --> Render
 * ---------------
 * Main:    windowName.webContents.send('channel', data); // Data is optional.
 * Render:  window.ipcRender.receive('channel', (data) => { methodName(data); });
 *
 * Render --> Main (Value) --> Render
 * ----------------------------------
 * Render:  window.ipcRender.invoke('channel', data).then((result) => { methodName(result); });
 * Main:    electronIpcMain.handle('channel', (event, data) => { return someMethod(data); });
 *
 * Render --> Main (Promise) --> Render
 * ------------------------------------
 * Render:  window.ipcRender.invoke('channel', data).then((result) => { methodName(result); });
 * Main:    electronIpcMain.handle('channel', async (event, data) => {
 *              return await promiseName(data)
 *                  .then(() => { return result; })
 *          });
 */

---

在main.js腳本中，讓我們監聽頻道名稱的使用，當檢測到時，通過相應的實例方法修改window 。

main.js （主進程）

const electronApp = require('electron').app;
const electronBrowserWindow = require('electron').BrowserWindow;
const electronIpcMain = require('electron').ipcMain;

const nodePath = require('path');

let window;

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.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();
    }
});

// ---

electronIpcMain.on('window:minimize', () => {
    window.minimize();
})

electronIpcMain.on('window:maximize', () => {
    window.maximize();
})

electronIpcMain.on('window:restore', () => {
    window.restore();
})

electronIpcMain.on('window:close', () => {
    window.close();
})

---

最后，使用事件偵聽器，讓我們列出按鈕的click事件，以沿着正確的通道（名稱） send消息。

index.html （渲染進程）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Electron Test</title>
    </head>

    <body>
        <input type="button" id="minimize" value="minimise">
        <input type="button" id="maximize" value="maximise">
        <input type="button" id="restore" value="restore">
        <input type="button" id="close" value="close">
    </body>

    <script>
        document.getElementById('minimize').addEventListener('click', () => {
            window.ipcRender.send('window:minimize');
        });

        document.getElementById('maximize').addEventListener('click', () => {
            window.ipcRender.send('window:maximize');
        });

        document.getElementById('restore').addEventListener('click', () => {
            window.ipcRender.send('window:restore');
        });

        document.getElementById('close').addEventListener('click', () => {
            window.ipcRender.send('window:close');
        });
    </script>
</html>