Electron v1.7：关闭、最大化和最大化

Question

Electron v1.7：关闭、最大化和最大化

我正在尝试构建一个具有关闭、最大化和最小化按钮的简单应用程序。

应用程序的问题是关闭、最大化和最小化无法正常工作。该console.log()被点击的按钮后，正常运行并显示正确的信息，但是，它没有执行实际的关闭，最大化和最小化操作。

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

附上截图。

驱动 index.js 的内容是：

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

kon*_*ten 9

这可以通过使用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);

/*
  getFocusedWindow() may return null.
  If a user uses global keyboard shortcut to trigger 
  minimizeWindow, there may not be any window that 
  is focused right now
*/ 
const getWindow = () => remote.BrowserWindow.getFocusedWindow();

function closeWindow () {
    getWindow().close();
}

function minimizeWindow () {  
    getWindow().minimize();
}

function maximizeWindow () {
    const window = getWindow();
    window.isMaximized() ? window.unmaximize() : window.maximize();
}

Run Code Online (Sandbox Code Playgroud)

有经验的开发人员可以解释为什么getFocusedWindow()有效而不是getCurrentWindow()。

归档时间：	8 年，2 月前
查看次数：	9834 次
最近记录：	5 年，2 月前