Question

我正在尝试构建一个具有Close，Maximize和Minimize按钮的简单应用程序。

应用程序的问题是Close，Maximize和Minimize无法正常工作。单击按钮时console.log()正常运行并显示正确的消息，但是，它不执行实际的关闭，最大化和最小化操作。

另外，不是在CSS中，我为标题添加了-webkit-app-region: drag;，但为选项添加了-webkit-app-region: no-drag;，即按钮。

附上截图。

驱动程序index.js的内容是：

＆＃13;

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);

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

此外，script.js的内容是

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

Answer 1

可以使用getFocusedWindow代替getCurrentWindow修复此问题。

在您的script.js文件中，更新功能closeWindow()，minimizeWindow()和maximizeWindow()，如下：

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

经验丰富的开发人员可以解释getFocusedWindow()代替getCurrentWindow()的原因。

Answer 2

如果这对您不起作用：

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

尝试以下方法：

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

电子v1.7：关闭，最大化和最大化

2 个答案: