Electron v1.7: Close, Maximize and Maximize

问题

I am trying to build a Simple App having Close, Maximize and Minimize buttons.

The problem with the application is that the Close, Maximize and Minimize are not working properly. The console.log() when the buttons are clicked, is functioning properly and displaying the proper messages, however, it is not performing the actual Close, Maximize and Minimize operations.

Also, not that in the CSS, I have added -webkit-app-region: drag; for the header but added -webkit-app-region: no-drag; for options, i.e., buttons.

Attaching a screenshot.

The content of driver index.js is:

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

let win = null;

function boot() {
    win = new BrowserWindow({
        width: 640,
        height: 480,
        frame: false
    });
    win.loadURL(`file://${__dirname}/index.html`);
    win.on('closed', () => {
        win = null;
    });
}

app.on('ready', boot);

header {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    background: #353535;
    color: black;
    align-self: stretch;
    -webkit-app-region: drag;
}

#content {
    display: flex;
    height: 100vh;
    flex-direction: column;
    background: black;
    align-items: center;
}

.option {
    color: white;
    padding: 10px 25px;
    font-size: 16px;
    cursor: pointer;
    -webkit-app-region: no-drag;
    
}

.option:hover {
    background: red;
}

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Sample App</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div id="content">
            <header>
                <div class="option" id="close">X</div>
                <div class="option" id="minimize">-</div>
                <div class="option" id="maximize">=</div>         
            </header>               
        </div>
        
        <script src="js/script.js"></script>
    </body>
</html>

Also, the contents of script.js is

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

document.getElementById('close').addEventListener('click', closeWindow);
document.getElementById('minimize').addEventListener('click', minimizeWindow);
document.getElementById('maximize').addEventListener('click', maximizeWindow);



function closeWindow () {        
    var window = remote.getCurrentWindow();
    window.close();
}

function minimizeWindow () {   
    var window = remote.getCurrentWindow();
    window.minmize();
}

function maximizeWindow () {
    var window = remote.getCurrentWindow()
    window.isMaximized() ? window.unmaximize() : window.maximize();
}

回答1:

This can be fixed by using getFocusedWindow instead of getCurrentWindow.

In your script.js file, update the the functions, closeWindow(), minimizeWindow() and maximizeWindow(), as:

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

document.getElementById('close').addEventListener('click', closeWindow);
document.getElementById('minimize').addEventListener('click', minimizeWindow);
document.getElementById('maximize').addEventListener('click', maximizeWindow);

function closeWindow () {
    var window = remote.BrowserWindow.getFocusedWindow();
    window.close();
}

function minimizeWindow () {  
    var window = remote.BrowserWindow.getFocusedWindow();
    window.minimize();
}

function maximizeWindow () {
    var window = remote.BrowserWindow.getFocusedWindow();
    window.isMaximized() ? window.unmaximize() : window.maximize();
}

The reason why getFocusedWindow() works instead of getCurrentWindow() can be explained by an experienced developer.

回答2:

If this didn't work for you:

window.isMaximized() ? window.unmaximize() : window.maximize();

Try this instead:

  function maximizeWindow () {
    var window = remote.BrowserWindow.getFocusedWindow();
    window.setFullScreen(!window.isFullScreen());
  }

来源：https://stackoverflow.com/questions/46866735/electron-v1-7-close-maximize-and-maximize

标签

javascript

electron